写手机端页面应该注意的地方
像素：一个像素就是计算机屏幕所能显示的一种特定颜色的最小区域。
像素分为：设备像素和css像素。
视口：是html的父元素，即视口为初始包含块
视口分为：
- 布局视口（移动端css布局的依据视口）
- 视觉视口（看到网站的区域）
- 理想视口（定义理想的布局视口）
在手机上为了容纳为桌面浏览器设计的网站，默认的布局视口宽度远大于屏幕的宽度
<meta name="viewport" contant=" width:device-width" />意为将布局视口的宽度设为理想视口
关于视口：
- 在PC端，布局视口就是浏览器窗口
- 在M站，视口分为布局视口和视觉视口
- M站还有一个理想视口（理想视口的尺寸因设备和浏览器不同而不同，且可以将布局视口的宽度设为理想视口）
设备像素比（DPR）Device Pixel Rati 简称（DPR）
DPR成立的前提是缩放比为1。
DPR=设备像素个数/理想视口css像素个数（device-width）.
device-width意为设备屏幕的宽度
<meta>标签
<meta name="viewport" contant="width=device-width,inital-scale=1.0;maximum-scale=1.0;user-scalable=no" />
- contant里面的内容为一个字符串值
- width=device-width 意为将布局视口的宽度设为理想视口
- inital-scale=1.0页面初始缩放比例为1
- maximum-scale=1.0页面的最大缩放比例为1
- user-scalable是否允许用户对页面进行修改
适用于DPR=2的设备
<meta name="viewport" contant="width=device-width,inital-scale=0.5,maximum-scale=0.5,user-scalable=no">
适用于所有设备：
<meta name="viewport" contant="">
<script>
var scale=1/window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('contant','width=device-width,inital-scale='+scale+',maximum-scale='+scale+',minmum-scale='+scale+',user-scale=no');
</script>
在适应了所有设备之后遇到了div的宽高不会随着屏幕的大小而变化所以可以在一个JS文件中加上：
document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px";
不同的设备现在可以等比缩放了，但是有一个缺点：转换尺寸时要除以75需要借助计算器，影响效率，且会出现除不尽的情况，使页面存在偏差。
方法2：
不修改meta标签
<meta name="viewport" contant="width=device-width,maxmum-scale=1,initial-scal=1,user-scarable=no">
<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5 + "px";
</script>
7.5是以rem为单位的页面总宽，是苹果6的宽度，苹果5的话是除以其他的
（思考：觉得这样不好用不同的屏幕难道还要写不同的吗？）
文字字体不需要换算成rem可用下面的代码
在屏幕最大是321px时body中默认字体的大小：
@media screen and (max-width:321px){
body{
font-size:16px;
}
}
在屏幕大小在321px和400px之间时body中默认字体的大小
@media screen and (min-width:321px)and(max-width:400px){
body{
font-size:17px;
}
}
在屏幕最大是400px时body中默认字体的大小
@media screen and(min-width:400px){
body{
font-size:19px;
}
}
片段二：
@media screen and (max-width:321px){
header,footer{
font-size:16px;
}
}
@media screen and (min-width:321px)and(max-width:400px){
header,footer{
font-size:17px;
}
}
@media screen and(min-width:400px){
header,footer{
font-size:19px;
}
}
