移动端-网页布局

布局方式

1. 固定宽度布局：为网页设置一个固定的宽度，通常以 px 做为长度单位，常见于 PC 端网页。
2. 流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3. 栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4. 响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

响应式布局

响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示

/* 大屏幕 */
@media (min-width:1200px) {
  .iponepro {       
    display: block;
  }
  .pro {
    display: none;
  }
}
/* 平板和小屏幕电脑 */
@media (min-width:768px) and (max-width:979px) {
.iponenav {    /*增加导航*/
    display: block;
  }
  .iponepro {
    display: block;
  }
  .pro {
    display: none;
  }
}
/* 横向放置手机和竖向放置的平板 */
@media (min-width:767px) {...}
/* 更小的设备 */
@media (min-width:480px) {...}