rem基础

rem是一个相对单位，类似em，em是父元素字体大小，不同的是rem的基准是相对于html元素的字体大小

  1. <html>
  2.   <body>
  3.           <div>
  4.               <p></p>
  5.           </div>
  6.   </body>
  7. </html>
  9. html {
  10.   font-size: 14px;
  11. }
  12. div {
  13.   font-size: 12px;
  14. }
  15. p {
  16.   //em相对于父元素的字体大小来说的
  17.   width: 10em; //10*12px
  18.   //rem相对于html元素字体大小来说的
  19.   height: 10rem;//10*14px
  20.   background-color: pink;
  21. }

媒体查询 @media

  1. 语法：
  2. @media mediatype and|not|only (media feature) {
  3.   css-Code
  4. }
  5. 1、用@media开头注意@符合
  6. 2、mediatype媒体类型
  7.         all|print(打印机)|screen
  8. 3、关键字and|not|only
  9. 4、media feature媒体特性 必须有小括号包裹
  10.      width|min-width|max-width
  12. @media screen and (max-width: 800) {
  14. }
  15. @media screen and (min-width: 540) and (max-width:969px) {
  17. }
  18. 媒体查询从小到大写会更简洁（因为样式的层叠行）

媒体查询样式引入

  1. <Link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
  2. <Link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

rem适配方案

通过媒体查询设置html字体大小，再配合rem设置宽度
市场主流
技术方案1 less、媒体查询、rem
技术方案2（推荐）flexible.js rem
image.png
image.png
image.png
image.png

苏宁首页

image.png
image.png