Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS:vm-rem移动端布局的基本常识
Blogger Information
Blog 56
fans 0
comment 4
visits 37922
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS:vm-rem移动端布局的基本常识
异乡客
Original
746 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post