整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標簽位于文檔的頭部，不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。
content屬性用來存儲meta信息的內容，這是一個必需的屬性，定義與 http-equiv 或 name 屬性相關的元信息，所有的主流瀏覽器都支持它，但它一般很少單獨使用，我們一般使用http-equiv或name來定義content屬性信息（或值）的名稱，http-equiv和name在一個meta中通常只能用其中一個。
正常我們這樣寫
<meta charset="utf-8">
視窗的寬度，經常用于收集適配
<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
http-equiv ：
http-equiv 屬性為名稱/值對提供了名稱。并指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。
當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。
使用帶有 http-equiv 屬性的 <meta> 標簽時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">
這樣發送到瀏覽器的頭部就應該包含：
content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
"keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。
強制刷新，自動刷新并指向新頁面。
<meta http-equiv="refresh" content="3">
移動端的 蘋果設備的設置
// 下面代碼來自天貓移動web <meta name="apple-mobile-web-app-capable" content="yes"/> // 可以讓app運行于全屏模式 <meta name="apple-mobile-web-app-title" content="TMALL"/> // 可以讓app的標題不同于頁標題 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> // 配置app的狀態欄，可設置為default, black, 和 black-translucent。
淘寶首頁的設置：
兩天去面試，被考察如何適配劉海屏、異性屏，回來總結了一套方案，以供大家參考。
為了演示方便，以下均已 iPhone X 橫屏作為例子。
安全區
其實瀏覽器已經默認使用了一種方案，在大多數情況下都能處理好異形屏問題，它的實現是基于安全區（safe area）的概念。
瀏覽器在默認情況下，會給頁面邊緣留空，以適應劉海屏的情況。
上圖中的橙色區域，就是瀏覽器留空的邊界，而中間部分就是安全區。頁面的元素布局、定位等，都是在安全區中進行。
安全區外的邊界大小無法通過 css 控制，但可以通過設置 html 或 body 的 background-color 來控制它的顏色（默認白色）。
可以發現，由于安全區的存在，內容并不能占滿整個屏幕。
這時候需要引入一個 meta 屬性值 viewport-fit=cover
內容填充整個屏幕
通過設置視口（viewport）的 meta 屬性，可以實現安全區填充滿整個屏幕。
此時，雖然頁面填充滿整個屏幕，但是部分內容會被劉海遮擋。
所以，需要手工地調整內容區的邊距。
在 React、Vue、Angular 這種單頁應用中，都存在根元素 <app-root>，我們可以通過給根元素設置固定的 padding 以規避遮擋。
但是固定的 padding 不能應用于所有的異性屏，畢竟劉海尺寸不一。辦法是通過結合上面提到的安全區 ——
注意觀察上述代碼，引入了 4 組變量，它們是預定義的環境變量，用于獲取安全區模式下的邊界。如 env(safe-area-inset-left)，用于獲取在安全區模式中的左邊界。
不過，這些變量可能存在兼容問題。通過前置 padding: 20px，使得在不兼容時應用固定的 padding，而兼容時候則覆蓋這個固定值。
在設置后，我們實現了如下效果。
而 header 和 footer 由于被設置為 position: fixed，寬度基于視口，所以還存在被遮擋問題。同樣，應用預定義的環境變量后可以解決這個問題。
結語
以上通過設置 HTML 的 meta 屬性和 CSS 的預定義環境變量，精細化地控制頁面邊距，實現適配劉海屏的效果。
你的點贊和轉發，是我創作的動力，希望能多多支持。
當涉及屏幕適配方案時，我們常常被眾多選擇所困擾，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在實際測試中，由于不同的Vue和Webpack版本，很多這些方式已經無法使用，反而帶來了更多麻煩。
為了盡快解決問題，我們應該始終以解決問題為導向，首先采用那些已經獲得驗證并能產生效果的方法。對于上述列舉的方案，雖然沒有一一測試過，但我們需要明確的是，抓住解決問題的關鍵。
針對移動端和PC端適配，我建議將兩者進行拆分并進行工程化配置，以避免整體框架調整后在某些頁面上出現輕微不協調。在某些情況下，你可能會注意到筆記本電腦上顯示比例縮放后的細微差異，這可以通過插入【整體縮放自適應解決方案（阿里團隊高清方案）的JS代碼】來解決。
viewport即視窗、視口，用于顯示網頁部分的區域，在PC端視口即是瀏覽器窗口區域，在移動端，為了讓頁面展示更多的內容，視窗的寬度默認不為設備的寬度，在移動端視窗有三個概念：布局視窗、視覺視窗、理想視窗。
viewport詳細設置：
移動端默認會縮放大尺寸的頁面的，當我們把上述代碼去掉之后，就會隨著移動端縮放的比例走，而且還可以自由放大。
方案統計：
代碼原理：
// 僅在移動端時候生效，或者瀏覽器手機模式
// 整體縮放自適應解決方案（阿里團隊高清方案） 淘寶m端使用的解決方案
! function (e) {
function t(a) {
if (i[a]) return i[a].exports;
var n=i[a]={
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded=!0, n.exports
}
var i={};
return t.m=e, t.c=i, t.p="", t(0)
}([function (e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i=window;
t["default"]=i.flex=function (e, t) {
var a=e || 100,
n=t || 1,
r=i.document,
o=navigator.userAgent,
d=o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
l=o.match(/U3/((\d+|.){5,})/i),
c=l && parseInt(l[1].split(".").join(""), 10) >=80,
p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s=i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s=1);
var u=1 / s,
m=r.querySelector('meta[name="viewport"]');
m || (m=r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
u + ",minimum-scale=" + u), r.documentElement.style.fontSize=a / 2 * s * n + "px"
}, e.exports=t["default"]
}]);
flex(100, 1);
// 高清方案默認1rem=100px,那么 btn的寬度就設置為:)
.btn {
width:0.8rem
height:1.2rem
}
【7】 移動端開發自適應解決方案（阿里團隊高清方案）
同時兼任pc和移動適配
通過配置兩套不同路由和判斷是否是移動端實現
核心代碼：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（區分路由）
搭配工程化，可以參考第二章【PC端適配方案】
npm i postcss-pxtorem --save-dev
?
//使用postcss-pxtorem
module.exports={
lintOnSave:true,
css:{
loaderOptions:{
postcss:[
require('postcss-pxtorem')({
rootValue:16,//根元素字體大小
unitPrecision:5, //允許rem單位增長的十進制數字
replace:true, //替換包含rems的規則，而不添加后備
mediaQuery:false, //允許在媒體查詢中轉換px
minPixelValue:0, //設置要替換的最小像素值
selectorBlackList:[], //忽略轉換正則匹配項
propList:['*'], //可以從px轉換為rem的屬性，匹配正則
exclude:/node_modules/i 要忽略并保留為px的文件路徑
}),
]
}
}
}
vue項目使用element-ui框架Rem適配（postcss-pxtorem、amfe-flexible），自動轉換px為rem，解決響應式問題
1366 * 768 ： 普通液晶顯示器 1920 * 1080： 高清液晶顯示器 2560 * 1440： 2K高清顯示器 4096 * 2160： 4K高清顯示器 1280 * 720： 筆記本（1920*1080分辨率下系統默認推薦150%縮放比產生的尺寸）
大屏數據可視化項目通常用于放在電視或廣告屏上展示用，而不允許出現滾動條
設計稿按照1920*1080的分辨率，16:9的比例設計， 實際開發中，document窗口不足16:9（高度減掉頂部tab及導航欄，地址欄等） 不同分辨率：實際應用場景中，顯示場景不同，不能固定寫死px單位 不同比例：不同的顯示器寬高比與設計稿不一致
rem是CSS3新增的相對長度單位，是指相對于根元素html的font-size計算值的大小。簡單可理解為屏幕寬度的百分比。 但是，項目中常見尺寸繪制采用的均是px，要改用rem一時半會緩不過來，而且可能還要換算轉換，所以使用rem還是比較麻煩的，但是，我們可以通過插件，能夠將項目中的px轉換為rem，還可以自定義基數。
npm install amfe-flexible // CSS單位自適應轉換插件 負責更改根font-size
npm install postcss-pxtorem@^5.1.1 // 如果版本過高可以降版本下載5.1.1版本 負責將px轉成rem
// 用途：echarts字體適配
/**
* echarts字體自適應
* @param {*} font 字號大小
*/
export function echartGetFontSize(font) {
let docEl=document.documentElement,
clientWidth= window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
let fontSize=clientWidth / 1920;
return font * fontSize;
}
由于 viewport 單位得到眾多瀏覽器的兼容，lib-flexible 這個過渡方案已經可以放棄使用，不管是現在的版本還是以前的版本，都存有一定的問題。建議大家開始使用 viewport 來替代此方。（待考證？）
amfe-flexible是lib-flexible的升級版
flexible就是根據不同的屏幕算出html的font-size，通過js來動態寫meta標簽
實上他做了這幾樣事情：
在main.js中引入amfe-flexible
import "amfe-flexible"
amfe-flexible 等價代碼
// import '@/utils/rem.js'
?
// 在utils文件夾下創建rem.js
// 設置 rem 函數
function setRem() {
// 1920 默認大小16px; 1920px=120rem ;每個元素px基礎上/16
const screenWidth=1920
const scale=screenWidth / 16
const htmlWidth=document.documentElement.clientWidth || document.body.clientWidth
// 得到html的Dom元素
const htmlDom=document.getElementsByTagName('html')[0]
// 設置根元素字體大小
htmlDom.style.fontSize=htmlWidth / scale + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize=function() {
setRem()
}
配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，權重從左到右降低，沒有則新建文件，只需要設置其中一個即可.
/***
注意點：
（1）rootValue根據設計稿寬度除以10進行設置，這邊假設設計稿為1920，即rootValue設為192；
（2）propList是設置需要轉換的屬性，這邊*為所有都進行轉換。
***/
module.exports=function(){
devServer:{
port:3000,
open:true
},
//rem配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 192, //根元素字體大小
propList: ['*'], //可以從px轉換為rem的屬性，匹配正則
// unitPrecision:5, //允許rem單位增長的十進制數字
// replace:true, //替換包含rems的規則，而不添加后備
// mediaQuery:false, //允許在媒體查詢中轉換px
// minPixelValue:0, //設置要替換的最小像素值
// selectorBlackList:[], //忽略轉換正則匹配項
// exclude:/node_modules/i 要忽略并保留為px的文件路徑
})
]
}
}
},
}
// 效果展示 在html上增加根font-size
<html lang="en” style="font-size: 192px;class="light-themes">
對于行內樣式，阿里手淘并不能將px轉rem，所以對于需要自適應的樣式，如font-size、width、height等請不要寫在行內。同理，對于不需要轉化的樣式可以寫在行內，或者使用PX（大寫）作為單位。
暫未找到可以轉行內rem的插件，可根據下面地址的方式自己實現（未驗證是否可行）。blog.csdn.net/weixin_3961…
我們都知道chrome的最小顯示的字體是12px，如果字體用rem，計算出來小于12px，那么就也會以12px顯示，而且我們不希望出現13px或者15px這樣的奇葩尺寸，所以字體最好是用PX（大寫）來表示，至于適應，我們可以寫媒體查詢。
.item {
border-bottom: 1PX #8d8d8d dashed;
font-size: 12PX;
line-height: 16PX;
@media screen and (min-width: 576PX) {
font-size: 14PX;
line-height: 18PX;
}
@media screen and (min-width: 768PX) {
font-size: 16PX;
line-height: 28PX;
}
@media screen and (min-width: 992PX) {
font-size: 16PX;
line-height: 32PX;
}
@media screen and (min-width: 1200PX) {
font-size: 18PX;
line-height: 64PX;
}
}
?
PC端響應式媒體斷點：
?
```css
@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的設備*/
?
@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1100的設備*/
@media (min-width: 1280px) {
body{font-size: 22px;}
} /*>=1280的設備*/
?
@media (min-width: 1366px) {
body{font-size: 24px;}
}
?
@media (min-width: 1440px) {
body{font-size: 25px !important;}
}
?
@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}
```
?
?
已測試屏幕尺寸：1920*1080 、1366 * 768
問題：屏幕縮小，網頁縮放，效果與原1920*1080不一致
// 僅在移動端時候生效，或者瀏覽器手機模式
// 整體縮放自適應解決方案（阿里團隊高清方案）
! function (e) {
function t(a) {
if (i[a]) return i[a].exports;
var n=i[a]={
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded=!0, n.exports
}
var i={};
return t.m=e, t.c=i, t.p="", t(0)
}([function (e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i=window;
t["default"]=i.flex=function (e, t) {
var a=e || 100,
n=t || 1,
r=i.document,
o=navigator.userAgent,
d=o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
l=o.match(/U3/((\d+|.){5,})/i),
c=l && parseInt(l[1].split(".").join(""), 10) >=80,
p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s=i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s=1);
var u=1 / s,
m=r.querySelector('meta[name="viewport"]');
m || (m=r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
u + ",minimum-scale=" + u), r.documentElement.style.fontSize=a / 2 * s * n + "px"
}, e.exports=t["default"]
}]);
flex(100, 1);
“node-sass”: “^4.9.0”,
“sass-loader”: “^7.1.0”
作者：幸運_
鏈接：https://juejin.cn/post/7278646930174165050
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
