動(dòng)態(tài)REM
- 我們都知道移動(dòng)端頁面在做適配時(shí)罚缕，媒體查詢響應(yīng)式是一種方法，但是鑒于需要寫多套的CSS怎静，考慮多種設(shè)備寬度邮弹，非常麻煩。
除了使用媒體查詢響應(yīng)式之外蚓聘，還有另一種更好用的方案就是動(dòng)態(tài)rem腌乡。
- 首先我們假設(shè)設(shè)計(jì)稿的基本頁面寬度為320px，1個(gè)rem指的是1個(gè)頁面寬度夜牡，
獲取當(dāng)前設(shè)備視口的寬度和與設(shè)計(jì)稿基準(zhǔn)寬度的比率scale：
var width=document.documentElement.clientWidth;//獲取當(dāng)前視口的寬度
var scale= width/320; //基本尺寸是320px
然后我們使用JS寫入CSS与纽，
var css=`
html {
font-size: ${320*scale/10}px;
}
`
document.write(`<style>${css}</style>`)
rem這個(gè)單位代表頁面的寬度，在原來的CSS中塘装，我們使用的單位都是px急迂，注意這個(gè)CSS是以設(shè)計(jì)稿寬度為320px這個(gè)標(biāo)準(zhǔn)下寫的。
<style>
body {
background: white;
margin: 0;
}
#section1 {
text-align: center;
}
#section1 img {
width: 74px;
margin-top: 60px;
border-radius: 50%;
margin-bottom: 34px;
}
#section1 .tags {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 16px;
}
#section1 span {
background-color: #D8D8D8;
width: 128px;
line-height: 24px;
height:24px;
margin: 0 0 24px;
}
#section2 {
background: #EFEFEF;
text-align: center;
padding: 50px 0 30px;
}
#section2 h2 {
background: #D8D8D8;
display: inline-block;
width: 200px;
margin: 0 0 20px;
border-radius: 14px;
line-height: 40px;
}
#section2 p {
background-color: #d8d8d8;
width: 250px;
display: inline-block;
margin: 0 0 20px;
line-height: 24px;
height: 24px;
border-radius: 14px;
}
</style>
那么結(jié)合320px和CSS中每一個(gè)px值的比率蹦肴，本來：
html {
font-size: ${320*scale/10}px;
}
這個(gè)CSS片段中僚碎，320*scale表示的就是實(shí)際的設(shè)備頁面寬度，我們可以理解為10rem==320*scale阴幌，也就是說10個(gè)rem代表一個(gè)頁面
寬度勺阐，他是一個(gè)動(dòng)態(tài)的值，可以理解為一個(gè)比例∶現(xiàn)在渊抽，以height: 24px為例，它基準(zhǔn)設(shè)備寬度為320px议忽，也就是說可以轉(zhuǎn)化為
height: (24/320)*10 rem懒闷，也就是說height: 0.75rem.
思路簡化如下：
1. 瀏覽器禁止980px像素縮放
2. 設(shè)置html{font-size: 頁面寬度/10 px}
3. 10rem == 頁面寬度
4. 所有單位都使用rem，這樣長度以頁面寬度為基準(zhǔn)
5. 頁面可兼容任何手機(jī)屏幕
寫到這里，我們貼出代碼及頁面效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<script>
var width=document.documentElement.clientWidth;//獲取當(dāng)前視口的寬度
console.log(width)
var scale= width/320; //基本尺寸是320px
console.log(scale)
var css=`
html {
font-size: ${320*scale/10}px;
}
`
document.write(`<style>${css}</style>`)
</script>
<title>JS Bin</title>
</head>
<body>
<section id="section1">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="tags">
<span>標(biāo)簽1</span>
<span>標(biāo)簽2</span>
<span>標(biāo)簽3</span>
<span>標(biāo)簽4</span>
</div>
</section>
<section id="section2">
<h2>文字文字1</h2>
<h2>文字文字2</h2>
<p>文字文字文字文字文字1</p>
<p>文字文字文字文字文字2</p>
</section>
<style>
body {
background: white;
margin: 0;
font-size: .5rem;
}
#section1 {
text-align: center;
}
#section1 img {
width: 2.3125rem;
margin-top: 1.875rem;
border-radius: 50%;
margin-bottom: 1.0625rem;
}
#section1 .tags {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 .5rem;
}
#section1 span {
background-color: #D8D8D8;
width: 4rem;
line-height: 0.75rem;
height: 0.75rem;
margin: 0 0 0.75rem;
}
#section2 {
background: #EFEFEF;
text-align: center;
padding: 1.5625rem 0 0.9375rem;
}
#section2 h2 {
background: #D8D8D8;
display: inline-block;
width: 6.25rem;
margin: 0 0 0.625rem;
border-radius: 0.4375rem;
line-height: 1.25rem;
}
#section2 p {
background-color: #d8d8d8;
width: 7.8125rem;
display: inline-block;
margin: 0 0 0.625rem;
line-height: 0.75rem;
height: 0.75rem;
border-radius: 0.4375rem;
}
</style>
</body>
</html>
頁面效果：
頁面效果.jpg
你可以自己在本地嘗試毛雇，這樣可適配任意手機(jī)尺寸嫉称。
border 1px問題
- 接下來我們來聊一聊手機(jī)屏幕中的1px邊框問題。我們知道灵疮，在普通屏幕中织阅，CSS中的1px就是代表設(shè)備中的1px，但是在Retina屏幕下震捣，CSS的
1px它指設(shè)備中的2px荔棉，iphone就是使用的Retina屏幕，這樣的屏幕顯示效果會(huì)更好當(dāng)然會(huì)比較耗電蒿赢。在實(shí)際的開發(fā)過程中判帮，由于設(shè)計(jì)師的處女情
結(jié)，他們會(huì)要求即使在retina屏幕下浇雹，1px也必須代表設(shè)備中的1px（前端默默地豎起中指稿蹲，女設(shè)計(jì)師除外）
- 我們想到的解決方法是讓border-width: 0.5px,這樣就能讓在retina屏幕下也代表只有1px的設(shè)備像素，但是這樣是有兼容性問題的皂冰，根本就
不推薦使用店展。正確的方法是：
- 頁面整體縮放50%，即meta里面設(shè)置50%秃流， 然后再將rem設(shè)置成原來的2倍赂蕴。
具體的思路如下：
1. 獲取設(shè)備像素比(1/2/3)
2. initial-scale = 1/像素比
3. 讓rem變?yōu)閞em*像素比
4. 最后border： 1px solid red
這里我將代碼貼出來：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var scale = 1 / window.devicePixelRatio // 1\2\3
document.write(`
<meta name="viewport"
content="initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">
`)
</script>
<script>
var width = document.documentElement.clientWidth / window.devicePixelRatio
var css = `
html{
font-size: ${width / 10 * window.devicePixelRatio}px;
}
`
document.write(`<style>${css}</style>`)
</script>
<title>JS Bin</title>
</head>
<body>
<section id="section1">
<img src="http://placehold.it/100x100" alt="">
<div class="tags">
<span>標(biāo)簽1</span>
<span>標(biāo)簽2</span>
<span>標(biāo)簽3</span>
<span>標(biāo)簽4</span>
</div>
</section>
<section id="section2">
<h2>文字文字文字</h2>
<h2>文字文字文字</h2>
<p>文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字</p>
</section>
<style> body {
background: white;
margin: 0;
font-size: 0.5rem;
}
#section1 {
text-align: center;
border-bottom: 1px solid red;
}
#section1 img {
width: 2.3125rem;
margin-top: 1.875rem;
border-radius: 50%;
margin-bottom: 1.0625rem;
}
#section1 .tags {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0.5rem;
}
#section1 span {
background: #D8D8D8;
width: 4rem;
line-height: 0.75rem;
height: 0.75rem;
margin: 0 0 0.75rem;
}
#section2 {
background: #EFEFEF;
text-align: center;
padding: 1.5625rem 0 .9375rem;
}
#section2 h2 {
background: #d8d8d8;
display: inline-block;
width: 6.25rem;
margin: 0 0 .625rem;
border-radius: .4375rem;
line-height: 1.25rem;
height: 1.25rem;
}
#section2 p {
background: #E8E8E8;
width: 7.8125rem;
display: inline-block;
margin: 0 0 .625rem;
line-height: .75rem;
height: .75rem;
border-radius: .4375rem;
}
</style>
</body>
</html>
頁面效果同上。
