移动端开发页面布局(1)

1、导言

1.1 手机调试方式

（1）谷歌浏览器

（2）本地web服务器
（3）外网服务器

1.2 视口

（1）布局视口
（2）视图视口
（3）理想视口：手机端常用
手动添加meta视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

1.3 二倍图

（1）物理像素&物理像素比

1px能显示的物理像素点的个数，称为物理像素比。
物理像素比window.devicePixelRatio = 设备像素/css像素。这样，非视网膜屏上，屏幕物理像素320像素，独立像素也是320像素，因此物理像素比等于1.
但在视网膜屏上，屏幕物理像素640像素，独立像素还是320像素，因此，物理像素比等于2.

物理像素：即设备像素，显示设备上最微小的物理部件。 比如 iphone 5：640 x 1136px. 不同的机型有不同的设备像素,固定死的。物理像素和分辨率相关，显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

CSS像素: css pixel。抽象概念，设备无关像素。DIPS，device-independent像素。在标准情况下一个CSS像素对应一个设备像素。

对于位图而言：
当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示。因为一个位置像素不能进一步分裂，
当物理像素比=2时，他要放大两倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以二填补相同的物理表面在视网膜屏幕下显示。

（2）假设CSS尺寸是50* 50，如果不处理图片，因为物理像素比的存在，放入50* 50大小的图片至页面后相当于会放大图片，导致图片不清晰。
为保证清晰度，先准备一个100* 100的图片，放入页面后，在css中设置将图片大小进行缩小至50* 50，因为物理像素比的存在，页面会放大为100*100，放大后和原实际大小保持一致，保证了清晰度。

（3）准备的图片大小 比实际需要的大小 大 2倍，这种方式就是二倍图

img {
height: 50px;
width: 50px; 
}
......
<img src="images/100.png" alt=""}
‘
/*工作原理：要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是50×50像素，
而需要2倍高宽，即100×100像素，CSS像素依然将图片限制是height=50px; width: 50px;*/

1.4 背景大小background-size

background-size: 宽度 高度; 
background-size: 50%; /*按父亲的百分比进行缩放，高度和宽度成比例缩放*/
background-size: cover; /* 宽度高度按比例缩放，先铺满的会继续缩放，直到完全覆盖住整个背景区域，可能会导致图片显示不全*/
background-size: contain; /*宽度高度按比例缩放，扩展至背景区域，宽度或高度某一个铺满则不再缩放，可能会有空白区域*/

如果是插入图片，设置图片img大小压缩和CSS中尺寸一致；如果是背景图，设置背景图片大小background-size压缩背景图尺寸完成。

div {
background: url(images/100.png) no-repeat;
background-size: 50px 50px;

1.5 移动端开发选择

（1）单独移动端页面（主流）（京东、携程、苏宁）

• 流式布局（百分比布局）
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

  （2）响应式兼容PC移动端（三星）

• 媒体查询
• bootstarp

• 1.6 盒子模型 box-sizing

  box-sizing: content-box; /*width以内容区开始计算，设置padding\border会扩大盒子*/
  box-sizing: border-box; /*边框固定，设置padding\border不会改变盒子大小*/
  

  1.7 特殊设置

  /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
  * {
  -webkit-tap-highlight-color: transparent;/*清除点击链接高亮效果*/
  }
  /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
  input {
  -webket-appearance:none; /*清除手机自带的样式*/
  }
  /*禁用长按页面时的弹出菜单*/
  img,a {
  -webkit-touch-callout:none; /*清除常按弹出菜单*/
  }