Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 移动端布局原理
Blogger Information
Blog 19
fans 0
comment 0
visits 10139
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
移动端布局原理
搬砖来学php
Original
335 people have browsed it

值的计算方式
如果当前设备的”视觉视口为375px ,用 100vw 表示 100vw = 375px，1vw = 100vw/100 = 375px/100 = 3.75px
当人为设置html {font-size: 100px}=1rem = 100px

  1.     1vw=3.75px:
  2.     100vw=375px  
  3.     2.人为设置 1rem=100px

1.使用VW+rem来实现动态拉伸 字体随页面宽度增减

  1.     html{
  2.         font-size: 100px;
  3.         font-size: calc(100vw / 3.75);
  4.     }

2.使用媒体查询给页面设置宽度大于470px的时候固定的字体大小为最大20px

  1.     @media (min-width: 470px) {
  2.         html {
  3.             font-size: 125px;
  5.     }

3.完整代码

  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>Document</title>
  8. </head>
  9. <style>
  10.     /* 1vw=3.75px:
  11.     100vw=375px  
  12.     2.人为设置 1rem=100px  */
  14.     /* 使用VW+rem来实现动态拉伸 字体随页面宽度增减 */
  15.     html{
  16.         font-size: 100px;
  17.         font-size: calc(100vw / 3.75);
  18.     }
  19.     /* 重置body默认字号为16px */
  20.     body{
  21.         font-size: 0.16rem;  /*计算方式16px/100=0.16rem*/
  22.     }
  23.         /* 媒体查询 */
  24.     /* 当给页面设置宽度大于470px的时候固定的字体大小为最大20px */
  25.     @media (min-width: 470px) {
  26.         html {
  27.             font-size: 125px;
  29.     }
  30. }
  31. </style>
  32. <body>
  33. <div class="zihao">php中文网</div>
  36. </body>
  37. </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