移动端网页基础

<meta name="viewport" 
content="width=device-width, 
//表示网页宽度等于设备的宽度，
user-scalable=no, 
//表示是否运行用户缩放
initial-scale=1.0,
//最初的缩放倍数，页面一打开的缩放倍数
 maximum-scale=1.0,
 //表示能缩放的最大缩放比
  minimum-scale=1.0"
 //表示能缩放的最小缩放比
>

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

三、物理像素和物理像素比

1.物理像素：分辨率

就是手机的实际分辨率，不是手机屏幕尺寸，不要搞混。
758*1340分辨率
表示一行的像素点是758个
一列的像素点是1340个

2.css的px

手机端1px不一定等于1物理像素
iphone8上，1px等于2个物理像素，
即iphone8的分辨率是750*1334
那么375px*667px大小的盒子就能完全覆盖住手机屏幕了。
即1px能显示两个物理像素
这个就是物理像素比或屏幕像素比（dpr）
手机分辨率单位 = px * dpr
即标签的大小会乘上dpr才是手机上分辨率的大小

在pc端1px是等于1物理像素的

3.视网膜屏

Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，
从而达到更高的分辨率，并提高屏幕显示的细腻程度。

4.倍图

比如5050px的图片，放到2dpr的手机上，就会当大2倍，会失真
所以需要准备一个100100px的图片，先手动缩小2倍，然后放大就不会模糊了。
即我们准备的图片要比实际需要的大2倍，这就是倍图。
手动缩小

img{
  width:50px;
  height:50px
  //这样就能手动缩小100*100的图了
}

背景图片也需要手动缩放

backgtound-size:50px 50px;

所以注意在视网膜屏下的开发。

5.背景图片属性

backgtound-size:宽度;
//只写一个数代表宽度，高度会等比例缩放
backgtound-size:宽度 高度;
//值可以是百分百，根据父盒子的大小计算
//值为cover：图片会完全覆盖盒子，图片有可能显示不全，图片是等比例拉伸。
//值为contain:图片会先满足接触到的一边，然后停止放大。图片会完全显示，但可能不会完全覆盖住盒子。图片是等比例拉伸。

四、开发选择

1.PC端和浏览器端分开制作
2.PC端和移动端混合开发，响应式制作
3.css初始化推荐使用normalize.css

五、移动端特殊样式解决

/*CSS3盒子模型，移动端无兼容性，PC端有兼容性*/
box-sizing: border-box;

-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除 设置为transparent 完成透明
这样点击a链接就没有高亮效果了
*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上
加上这个属性才能给按钮和输入框自定义样式

*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }