简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示移动端布局原理,并描述三大视口之间的换算关系与rem+vw布局的原理与流程
Blogger Information
Blog 37
fans 0
comment 0
visits 14220
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
实例演示移动端布局原理,并描述三大视口之间的换算关系与rem+vw布局的原理与流程
秋闲独醉
Original
296 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>移动端布局原理</title>
  8.   </head>
  9.   <body>
  10.     <div class="title">Hello World</div>
  11.     <!-- 1、单位rem是相对于html根元素的字号值. 
  12.     三个视口：
  13.     1、布局视口:面向开发者，与设备无关默认是980px，用width表示
  14.     2、视觉视口：与设备有关，用width-device表示
  15.     3、理想视口：用视觉视口布局，width= width-device; -->
  17.     <!-- 默认浏览器字号是16px，所以1rem=16px;
  18.     视觉视口用100vw表示,所以1vw ,是根据每个设备的不同表示的像素也不一样
  19.     如iphone6 ,375像素，1vw = 375/100 = 3.75px;
  20.     DPI:设备像素比= 设备像素/css像素
  21.     布局应该用css像素来布局 -->
  23.     <!-- 设置1rem =100px;font-size:100px; 
  24.     通常设计师给的设计稿, 为选择一个相对公认的通用宽度进行设计,一般用iPhone6的"375px"
  25.      求不同设备之间的比例值为 100vw =375px; 1rem=100px; 375px/100px=3.75;
  26.     通过3.75计算出： 
  27.     iphone6/11: 100vw = 375px; 375px/3.75=100px; 100px =1rem; 
  28.     iphone12/13: 100vw = 390px; 390px/3.75=104px; 104px = 1rem;
  29.     iphone11max: 100vw = 414px; 414px/3.75=110.4px; 110.4px = 1rem; -->
  31.     <style>
  32.       html {
  33.         font-size: calc(100vw / 3.75);
  34.       }
  35.       .title {
  36.         font-size: 0.16rem;
  37.       }
  38.       @media (max-width: 375px) {
  39.         /* 设置此时字体号为14px
  40.         14/16=0.875
  41.         100*0.875=87.5px; */
  42.         html {
  43.           font-size: 87.5px;
  44.         }
  45.       }
  47.       @media (min-width: 470px) {
  48.         /* 设置此时字体号为20px
  49.         20/16=1.25
  50.         100*1.25=125px; */
  51.         html {
  52.           font-size: 125px;
  53.         }
  54.       }
  55.     </style>
  56.   </body>
  57. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！