meta视口标签

<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	用户是否可以缩放，yes或者no (1或0）

标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

二倍图

1. 物理像素 就是我们说的分辨率 iphone8的物理像素是750
2. 在iphone8里面 1px开发像素 = 2个物理像素

物理像素比&物理像素

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的。比如苹果6\7\8是 750*1334
• 我们开发的时候1px不是一定等于1个物理像素的
• pc端1个px等于1个物理像素
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

背景缩放background-size

background-size属性规定背景图像的尺寸
background-size：背景图片宽度 背景图片高度；

• 单位：长度|百分比|cover|contain;
• cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域
• contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

css3盒子模型

box-sizing:border-box;
-webkit-box-sizing:border-box;

点击高亮我们需要清除，设置为transparent 完成透明

-webkit-tap-highlight-color:transparent;

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

-webkit-appearance:none;

禁用长按页面时弹出菜单

img,a{
   -webkit-touch-callout:none;
}