写手机端页面应该注意的地方

像素：一个像素就是计算机屏幕所能显示的一种特定颜色的最小区域。

像素分为：设备像素和css像素。

视口：是html的父元素，即视口为初始包含块

视口分为：

• 　　布局视口（移动端css布局的依据视口）
  
• 　　视觉视口（看到网站的区域）
• 　　理想视口（定义理想的布局视口）

在手机上为了容纳为桌面浏览器设计的网站，默认的布局视口宽度远大于屏幕的宽度

<meta name="viewport" contant=" width:device-width" />意为将布局视口的宽度设为理想视口

关于视口：

1. 在PC端，布局视口就是浏览器窗口
2. 在M站，视口分为布局视口和视觉视口
3. 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;

　　　　}

}