ASCII码 ASCII码

CSS:vm-rem移动端布局的基本常识

发布于：2022-05-26 15:42:12  栏目：技术文档
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>vm-rem移动端布局的基本常识</title>
  8. </head>
  9. <body>
  10.     <!-- DPR：设备像素比 -->
  12.     <!-- 布局视图：默认宽度一般是980px -->
  13.     <!-- 视觉视图：眼睛看的到的视图，移动设置的布局视图：375px--iPhone 6/7/8 -->
  14.     <!-- name="viewport" content="width=device-width, initial-scale=1.0" -->
  16.     <!-- viewport,视觉窗口，
  17.     width=device-width，页面的布局宽度
  18.     device-width：视觉视图的宽度，设备宽度，二者相等 -->
  20.     <!-- device-width：375px
  21.     width = 980px
  22.     width赋值后就等于375px了
  23.     当前的布局视图，就是当前移动设备浏览器的可视区宽度 -->
  25.     <!-- 1. 第一步实现：布局视图 = 视觉视图 -->
  27.     <!--2. 第二个小目标：理想视图 = 视觉视图
  28.     initial-scale=1.0 这种1：1还原视觉视图的布局，叫理想视图 -->
  30.     <!-- ！目前 主流的 移动端布局方案：rem + vm -->
  32. <!--    
  33.         /* iPhone 11  375px
  34.         vm:把屏幕分为100份
  35.         100 vm = 100% = 375px */
  37.         /* 之前浏览器默认字号 16px
  38.         这个也是默认的rem的大小
  39.         1 rem = 16 px */
  41.         /* 为了计算方便，推荐将rem设置为100px
  42.         例如一个元素 */
  43.         /* 1 rem = 100 px;
  44.         width = 50px = 0.5rem */
  46.         /* 通常会给750px的宽度的设计稿，DPR = 2
  47.         device-width = 750 px /DPR = 375px
  48.         以后就直接以375px为宽度布局，理想视图来布局 */ -->
  49.    <style>
  50.         html{
  51.             /* font-size: 100px; */
  52.             font-size: calc(100vw / 3.75);    
  54.             /* 1. 第一步：1rem =100 px */
  55.           }
  57.         body{
  58.             /* 把字号还原回去浏览器默认的字号 16px */
  59.             /* font-size: 16px; */
  60.             font-size: .16rem;
  62.             /* 2.第二步 1em = 16px */
  64.         }
  66.     </style>
  68. <div class="box">hello world</div>
  70. <style>
  71.     /* 200px *50px */
  72.     .box {
  73.         width: 2rem;
  74.         height: .5rem;
  75.         border: 1px solid #000;
  76.         background-color: lightgreen;
  77.         box-sizing: border-box;
  78.     }
  80.     /* vw是当前屏幕宽度的百分比 */
  81.     /* 1vw =1% */
  83.     /* 当屏幕宽度小于320px的时候，字号不能再小了，否则就看不清了 */
  84.     @media screen and (max-width:320px) {
  85.         html{
  86.             /* font-size: .85rem; */
  87.             font-size: 85px;
  88.         }
  89.     }
  91.     /* 当屏幕宽度大于640px,字体不能再大了 */
  92.     @media screen and (min-width:640px) {
  93.         html{
  94.             /* font-size: .85rem; */
  95.             font-size: 170px;
  96.         }
  97.     }
  98. </style>
  100. </body>
  101. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行