Community Learn Tools Library Leisure
search
English
Home > List of blog posts > rem\vw\px之间换算
Blogger Information
Blog 21
fans 0
comment 0
visits 9315
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\px之间换算
P粉116103988
Original
1085 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>Document</title>
  8. </head>
  9. <body>
  10.     <div class="text">
  11.         <div class="title">
  12.             <h2>PHP中文网</h2>
  13.         </div>
  14.         <div class="content">
  15.             PHP中文网，程序员梦想开始的地方！
  16.         </div>
  17.     </div>
  19.     <style>
  20.         /* 将1rem设置为100px:方便计算 */
  21.         html{
  22.             /* font-size: 100px; */
  23.             /* 移动端Iphne6/11宽度为375px：100vw=375px */
  24.             /* 移动端布局：布局视口=视觉视口 */
  25.             font-size: calc(100VW/3.75);
  26.         }
  27.         /* 重置大小 */
  28.         body{
  29.             /* font-size: 16px; */
  30.             /* 把px转为rem表示,字体就会随着视口宽度的变化而变化 */
  31.             font-size: 0.16rem;
  32.         }
  33.         @media (max-width:330px){
  34.             /* 设置移动端视口变小后的最小字体：14px */
  35.             /* 16px=1rem,14px=?rem ：14/16*1=0.875rem*/
  36.             /* 然后将rem转为px：0.875*100=87.5px */
  37.             html{
  38.                 /* 将这里大小固定下来，设备视口宽度小于330px后字体大小将固定为14px */
  39.                 font-size:87.5px ;
  40.             }
  41.         }
  42.         @media (min-width:470px){
  43.             html{
  44.                 /* 20/16=1.25rem*100px=125px, */
  45.                 font-size: 125px;
  46.             }
  47.         }
  48.         .text{
  50.             background-color: beige;
  51.         }
  52.         /* .text .title,
  53.         .text .content{
  54.             width: 980px;
  55.             text-align: center;
  56.             margin: auto;
  57.         } */
  58.     </style>
  59. </body>
  60. </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