响应式开发最佳实践(viewport+rem)
2018-08-29 本文已影响0人
One_Hund
一、CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
参考链接：https://github.com/jawil/blog/issues/21
要点归纳
- DPR = 设备像素/CSS像素
- viewport的值取
width与initial-scale的最大值 - viewport只是改变
document.documentElement.clientWidth或window.innerWidth - 为了防止有滚动条，禁止缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
二、响应式开发最佳实践（参考淘宝响应式）
参考链接： http://www.cnblogs.com/lyzg/p/4877277.html
响应式开发最佳实践原理分析：
- 在实际项目中，把与元素尺寸有关的css，如
width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。 - font-size用
媒体查询改变px，不能设为rem。 - 网易响应式：只修改
font-size - 淘宝响应式：即修改
font-size，又修改viewport【看下面<script>的源码】 - 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘宝响应式多写了下面这2句，修改viewport
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 淘宝+网易响应式都需要的修改font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
},false)
</script>
<body>
<div>
<div style="
background: pink;
height: 2rem;
width: 8rem;
">600px</div>
<div style="
background: lightblue;
height: 2rem;
width: 8rem;
">600px</div>
</div>
</body>
</html>
-
网易响应式（只修改font-size）：
-
淘宝响应式（既修改font-size，又修改viewport）：
由此可见：两者最终视觉上的宽高是一致的，但同样视觉宽高，淘宝做法显示更多的像素点，所以将会更加高清，效果更好，推荐使用。
- 技术要点：
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘宝做法多写了下面这2句，修改viewport
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 通用做法（淘宝+网易都需要），修改font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
},false)
</script>
- 修改viewport的时候，即使屏幕变宽（从375px-->750px），但因为font-size也跟着变大同样的倍数（从37.5-->75px），所以用rem做单位的元素，宽高在视觉上没有变化。
- 淘宝响应式，先将页面的宽高根据DPR，由CSS像素(375px)还原成设备像素(750px)，再由此时的clientWidth(750px)按照相对值设置font-size，再由rem设置相对尺寸，这样根据750px设计稿便可轻松设计出设配不同像素的手机了
- 若rem计算不方便，可设置font-size=cilentWidth/7.5=100px，如此便可方便换算了
附、Domready使用“DOMContentLoaded”事件监听
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
参考链接：https://www.jianshu.com/p/88b9d3874749
