移动端基础

1.视口：
视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口、理想视口
移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就 有多宽
通过给移动端页面增加meta视口标签
2.meta视口标签

  <meta name="viewport"//视口标签 content="width=device-width //viewport宽度, 
    initial-scale=1.0//初始缩放比,maximum-scale=1.0//最大缩放比, minimum-scale=1.0//最小缩放比
    , user-scalable=no//用户是否可以缩放">

3.物理像素与物理像素比
物理像素指的是屏幕显示的最小颗粒，是物理真实存在的。
我们开发时1px不是一定等于1物理像素
PC端页面1px等于1个物理像素，但是移动端不尽相同
一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比
4.二倍图
我们需要一个5050像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100 100 就会模糊
我们采取的是 放一个 100* 100 图片 然后手动的把这个图片 缩小为 50* 50 （css像素）
我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图
5.css3盒模型
传统盒子模型= width + border + padding =box-sizing: content-box
padding 和 border 不会再撑大盒子了= box-sizing: border-box;