媒体查询(参数)

  1. /* 语法 */
  2. @media mediatype and|not|only (media feature) {
  3.     CSS-Code;
  4. }
  6. /* 你也可以针对不同的媒体使用不同 stylesheets */
  7. <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
  1. width、height     浏览器可视宽度、高度
  2. device-width      设备屏幕宽度
  3. device-height  设备屏幕高度
  4. ...

flex弹性布局

flex_container.jpg

r(root)em

相当于根元素html的字体大小单位 em相当于父元素的字体大小单位

自适应布局

不同设备用不同页面或局部伸缩

响应式布局

确保一个页面在所有终端上都能显示出令人满意的效果

rem弹性布局

为了确保在各种屏幕上不失真，根据实际屏幕宽度做等比例换算