PC端与移动端的适配问题

响应式布局

同一页面在不同屏幕尺寸下有不同的布局，实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

1.设置meta标签
例如：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：

viewport：即视口，表示网页的可视区域；
width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

2.媒体查询
根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

@media (min-width: 321px) and (max-width: 375px) {
    
    
  /*宽度范围321~375 显示为红色*/
  body {
    
    
    background: red;
  }
}
@media (min-width: 376px) and (max-width: 425px) {
    
      
  /*宽度范围376~425 显示为黄色*/  
  body {
    
      
    background: yellow;  
  } 
}

Flex布局

弹性布局，非常简便、灵活、完整。详细参考阮一峰的日志。

流体布局

使用百分比、em、rem设置元素，也可以用计算函数calc()。

单位em与rem的区别

em
子元素字体大小的em，指的是相对于父元素字体大小的百分比。
元素width/height/padding/margin属性使用em，指的是相对于自身字体大小的百分比。

rem
无论什么元素，rem指的是相对于根元素字体大小的百分比，一般根元素为。