一、設(shè)備的css像素是不同的
1. CSS像素（邏輯像素）
- 可通過瀏覽器F12控制臺查看不同機(jī)型的css像素友题，比如iPhone6為375px裕照，iPhone6Plus為414px
- CSS中使用的一個(gè)抽象的概念当船，單位是px
- 值是相對的忙迁，并不是絕對的
2. 設(shè)備像素（物理像素）
- 屏幕的物理像素，任何設(shè)備屏幕的物理像素的數(shù)量都是固定不變的，單位是pt（點(diǎn)）
- 一般指的是手機(jī)的分辨率
- 1pt = 1/72英寸（inch）
3. 像素比（DPR）
物理像素 = css像素 * DPR
本質(zhì)：一個(gè)css像素占用幾個(gè)設(shè)備像素
獲燃崩琛：window.devicePixelRatioiphone6
750 × 1334 設(shè)備像素，屏幕分辨率
375 × 667 css像素侧到，瀏覽器中html的寬度就為375px
2.0 像素比DPR
二勃教、viewport可視區(qū)窗口的設(shè)置
通過meta標(biāo)簽設(shè)置，name="viewport"
1. content 視口里的相關(guān)設(shè)置
-
width視口的寬度匠抗，值為一個(gè)正整數(shù)故源，或字符串device-width（設(shè)備的實(shí)際寬度--css像素）。不建議設(shè)置數(shù)字（安卓設(shè)備有些不支持） -
height視口的高度（與width一至） -
user-scalable是否允許用戶進(jìn)行頁面縮放汞贸，值為no或yes绳军，代表不允許與允許 -
initial-scale頁面初始縮放值，值為一個(gè)數(shù)字（可以帶小數(shù)）矢腻。 -
minimum-scale頁面最小能夠縮放的比例门驾，值為一個(gè)數(shù)字（可以帶小數(shù)）。 -
maximum-scale頁面最大能夠縮放的比例多柑，值為一個(gè)數(shù)字（可以帶小數(shù)）奶是。
2. 注意事項(xiàng)
-
有的時(shí)候大家會見到同時(shí)寫了不允許縮放，又寫了最小與最大能夠縮放的比例竣灌，那這樣不是沖突了聂沙，為什么都已經(jīng)寫了不允許縮放了，還要寫那些初嘹？
原因：1及汉、會有一些第三方的工具能夠破壞user-scalable，比方說一些給父母的手機(jī)把文字放大的工具削樊，就會有可能。不過一般是沒有問題的 2兔毒、像iphone5下還會有黑邊 3漫贞、所以寫全了，可以避免一些bug ios10不支持user-scalable=no育叁，后面事件解決（阻止document的touchstart的默認(rèn)行為）
3. 推薦設(shè)置
不允許用戶縮放迅脐，默認(rèn)固定縮放比例為1.0
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
三、移動端瀏覽器樣式重置
將html豪嗽，body占滿整個(gè)設(shè)備的屏幕谴蔑。并且清除默認(rèn)的margin豌骏、padding
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
安卓和ios上的其他樣式
body{
font-family: helvetica;
margin: 0;
}
body *{
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%;
}
a,input,button{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
button,input{
-webkit-appearance: none;
border-radius: 0;
}
input::-webkit-input-placeholder{
color:#000;
}
input:focus::-webkit-input-placeholder{
color:#f00;
}
移動端的樣式重置
禁止用戶選中文字，安卓無效隐锭，用阻止touchstart后的默認(rèn)行為搞定
-webkit-user-select: none;禁止長按彈出系統(tǒng)菜單
-webkit-touch-callout: none;去除android下a/button/input標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的邊框 & 去除ios下a標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景
-webkit-tap-highlight-color: rgba(0,0,0,0);切換橫豎屏或者用戶自己通過瀏覽器設(shè)置的話窃躲，可以改變字體的大小(需要給body下的所有元素)
-webkit-text-size-adjust: 100%;-
按鈕在ios下都是圓角
-webkit-appearance: none; //button與input都會有個(gè)默認(rèn)背景 border-radius: 0; //input有個(gè)默認(rèn)圓角 -
修改placeholder的樣式
input::-webkit-input-placeholder{ color:#000; //默認(rèn)的樣式 } input:focus::-webkit-input-placeholder{ color:#f00; //點(diǎn)擊后的樣式 } -
字體
ios
默認(rèn)中文字體是Heiti SC
默認(rèn)英文字體是Helvetica
默認(rèn)數(shù)字字體是HelveticaNeue
無微軟雅黑字體android
默認(rèn)中文字體是Droidsansfallback
默認(rèn)英文和數(shù)字字體是Droid Sans
無微軟雅黑字體font-family: helvetica;
四、相對單位em和rem
1. em相對于父級
作為font-size的單位時(shí)钦睡，其代表父元素的字體大小蒂窒，作為其他屬性單位時(shí)，代表自身字體大小
.parent{
font-size:20px
}
.son{
width:1em;
/* 1em=20px */
}
問題：
1荞怒、chrom下有最小字體限制洒琢，必需為12px，所以這個(gè)值不能小于12
2褐桌、如果兩個(gè)一樣的元素衰抑，但是里面字體不一樣，那就不能統(tǒng)一設(shè)置了荧嵌∏河唬或者元素字體變化了，就又要統(tǒng)一設(shè)置一遍
2. rem相對于根元素html
CSS3新增的一個(gè)相對單位完丽，是相對于根元素html字體大小
html{
font-size:20px
}
/* 2rem=40px */
em和rem都是相對單位恋技，不同點(diǎn)在于em是相對于父級的font-size。而rem是相對于根節(jié)點(diǎn)html的font-size
五逻族、rem布局原理
iPhone6為例
通過瀏覽器F12查看控制臺可以看到iPhone6的css像素為375px
<style>
html {
font-size: 100px;
}
html,
body {
margin: 0;
padding: 0;
}
header {
width: 3.75rem;
font-size: 0.2rem;
background: #007ACC;
}
div {
width: 1.875rem;
height: 1.875rem;
font-size: 0.12rem;
background: #07C160;
}
</style>
<body>
<header>占滿屏幕</header>
<div>屏幕寬度的一半</div>
</body>
暫時(shí)設(shè)置html的font-size為100px（正常開發(fā)時(shí)是動態(tài)設(shè)置html根節(jié)點(diǎn)的字體大序叩住）
子元素的寬度全部用rem設(shè)置
那么所有子元素的css寬度 = 根節(jié)點(diǎn)字體大小 * 對應(yīng)的rem
在上面的例子中
- header的寬度：375px = 100 * 3.75rem
- div的寬度：187.5 = 100 * 1.875rem
iPhone6的css像素為375px，此時(shí)header剛好占滿屏幕聘鳞，div為屏幕寬度的一半
iPhone6Plus為例
iPhone6Plus的css像素為414px
此時(shí)設(shè)置根節(jié)點(diǎn)html的字體大小為110.4px,子元素不作任何變化
html {
font-size: 110.4px;
/* 414 / 3.75 = 110.4 */
}
- header的寬度：414px = 110.4 * 3.75rem
- div的寬度：207px = 110.4 * 1.875rem
此時(shí)可以意外的看到header仍然占滿了屏幕寬度薄辅，div為屏幕寬度一半。
而我們卻只是改變了html的字體大小就實(shí)現(xiàn)了這樣的功能
子元素隨著html成比例變化
rem的布局原理就是通過動態(tài)改變根節(jié)點(diǎn)的字體大小抠璃，來影響所有設(shè)置了rem單位的子元素的大小站楚，來保證元素大小和屏幕大小是成比例式的同步變化
那么如何設(shè)置子元素為多少rem呢？
目前市面通常以iPhone6作為標(biāo)準(zhǔn)搏嗡，設(shè)計(jì)稿尺寸一般為750px以便于計(jì)算
六窿春、動態(tài)設(shè)置根節(jié)點(diǎn)字體大小
以iPhone6為標(biāo)準(zhǔn)，設(shè)計(jì)稿尺寸750px
(function(doc, designWidth) {
const html = doc.documentElement;
const refreshRem = () => {
const clientWidth = html.clientWidth;
if (clientWidth >= designWidth) {
//給寬度一個(gè)最大值采盒，如果設(shè)備的寬度已經(jīng)超過設(shè)計(jì)稿的尺寸了旧乞，統(tǒng)一按一個(gè)值去算（傳的第三個(gè)參數(shù)）
html.style.fontSize = '100px';
} else {
// iPhone6為例：根節(jié)點(diǎn)字體大小為50px = 100 * (375 / 750)
html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
}
};
//dom加載完的一個(gè)事件
doc.addEventListener('DOMContentLoaded', refreshRem);
})(document, 750);
通過上面的立即執(zhí)行函數(shù)，在iPhone6中磅氨，根節(jié)點(diǎn)的字體大小被設(shè)置為了50px
那么如果要占滿屏幕寬度尺栖，則子元素寬度應(yīng)設(shè)置width:7.5rem;
占據(jù)一半，則設(shè)置width:3.75rem;烦租。相對于原來的100px延赌，以750的設(shè)計(jì)稿為標(biāo)準(zhǔn)可以讓計(jì)算時(shí)出現(xiàn)的小數(shù)點(diǎn)較少,便于計(jì)算除盏。
當(dāng)然也可以使用sass或者less編寫px2rem()函數(shù)，自動將px轉(zhuǎn)成rem挫以，便于代碼編寫
七者蠕、通過vw設(shè)置根節(jié)點(diǎn)字體大小
vw、vh單位
-
vwViewport's width的簡寫屡贺，1vw等于視口寬度的1% -
vhViewport's height的簡寫蠢棱，1vh等于視口高度的1% -
vmin取vw和vh中最小的值 -
vmax取vw和vh中最大的值
兼容性問題
ios 8 及以上的系統(tǒng)
Android 4.4及以上的系統(tǒng)
現(xiàn)在大部分的移動端設(shè)備都支持vw了
vw+rem適配方案
通過vw設(shè)置根節(jié)點(diǎn)字體大小，頁面里的尺寸依然使用rem
iphone6
1vw=375/100=3.75px;
iphone6Plus
1vw=414/100=4.14px;
以iPhone6設(shè)計(jì)稿為例：html的font-size為50px甩栈，1vw=3.75px
轉(zhuǎn)化為vw為 50 / 3.75 = 13.333333333333334vw
<style>
html{
font-size:13.333333333333334vw
/* font-size: calc(50vw/3.75); */
}
/* 占滿整個(gè)屏幕 */
header {
width: 7.5rem;
font-size: 0.4rem;
background: #007ACC;
}
/* 占據(jù)一半 */
div {
width: 3.75rem;
height: 3.75rem;
font-size: 0.2rem;
background: #07C160;
}
</style>
<body>
<header>占滿屏幕</header>
<div>屏幕寬度的一半</div>
</body>
