动态REM
- 我们都知道移动端页面在做适配时，媒体查询响应式是一种方法，但是鉴于需要写多套的CSS，考虑多种设备宽度，非常麻烦。
除了使用媒体查询响应式之外，还有另一种更好用的方案就是动态rem。
- 首先我们假设设计稿的基本页面宽度为320px，1个rem指的是1个页面宽度，
获取当前设备视口的宽度和与设计稿基准宽度的比率scale：
var width=document.documentElement.clientWidth;//获取当前视口的宽度
var scale= width/320; //基本尺寸是320px
然后我们使用JS写入CSS，
var css=`
html {
font-size: ${320*scale/10}px;
}
`
document.write(`<style>${css}</style>`)
rem这个单位代表页面的宽度，在原来的CSS中，我们使用的单位都是px，注意这个CSS是以设计稿宽度为320px这个标准下写的。
<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>
那么结合320px和CSS中每一个px值的比率，本来：
html {
font-size: ${320*scale/10}px;
}
这个CSS片段中，320*scale表示的就是实际的设备页面宽度，我们可以理解为10rem==320*scale，也就是说10个rem代表一个页面
宽度，他是一个动态的值，可以理解为一个比例。现在，以height: 24px为例，它基准设备宽度为320px，也就是说可以转化为
height: (24/320)*10 rem，也就是说height: 0.75rem.
思路简化如下：
1. 浏览器禁止980px像素缩放
2. 设置html{font-size: 页面宽度/10 px}
3. 10rem == 页面宽度
4. 所有单位都使用rem，这样长度以页面宽度为基准
5. 页面可兼容任何手机屏幕
写到这里，我们贴出代码及页面效果：
<!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;//获取当前视口的宽度
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>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签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
你可以自己在本地尝试，这样可适配任意手机尺寸。
border 1px问题
- 接下来我们来聊一聊手机屏幕中的1px边框问题。我们知道，在普通屏幕中，CSS中的1px就是代表设备中的1px，但是在Retina屏幕下，CSS的
1px它指设备中的2px，iphone就是使用的Retina屏幕，这样的屏幕显示效果会更好当然会比较耗电。在实际的开发过程中，由于设计师的处女情
结，他们会要求即使在retina屏幕下，1px也必须代表设备中的1px（前端默默地竖起中指，女设计师除外）
- 我们想到的解决方法是让border-width: 0.5px,这样就能让在retina屏幕下也代表只有1px的设备像素，但是这样是有兼容性问题的，根本就
不推荐使用。正确的方法是：
- 页面整体缩放50%，即meta里面设置50%， 然后再将rem设置成原来的2倍。
具体的思路如下：
1. 获取设备像素比(1/2/3)
2. initial-scale = 1/像素比
3. 让rem变为rem*像素比
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>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签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>
页面效果同上。
网友评论