css 移动端像素，rem适配详解 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>像素</title>
 6         <style>
 7             
 8             .box1{
 9                 width: 200px;
10                 height: 200px;
11                 background-color: #bfa;
12             }
13             
14         </style>
15     </head>
16     <body>
17         <div class="box1">我是div</div>
18         <!-- 
19             像素（px）
20                 - 屏幕是由一个一个发光的小点构成的，每个小点都是一个像素
21                 - 以上的概念中的像素属于 “物理像素”
22                 - 在编写网页时我们所使用的像素，称为“CSS像素”
23                 - 我们所使用的CSS像素最终显示时，都会被浏览器转换为物理像素
24                     有时候是1个CSS像素转换为1个物理像素 （1:1）
25                     而有时候是1个CSS像素 转换为多个物理像素（1:多）
26                     
27                 - 设备分辨率的查询网站
28                     https://material.io/resources/devices/
29                     
30                 - 分辨率
31                     - 显示面积相同，分辨率越高，像素点就越小
32                     14寸 1366 x 768
33                     14寸 1920 x 1080
34                     
35             iphone6 4.7寸 750 x 1334 视口默认宽度980px  CSS像素和物理像素比：980:750
36             6plus   5.5寸 1080 x 1920
37                 - 所以在移动设备中，像素都是非常非常小的（视网膜屏）
38                 
39             一个pc端的网站，如何在移动端呈现的呢？
40                 - 当通过移动设备去访问一个网页时，
41                     为了可以完整的将网页呈现，
42                         移动设备通常会将视口大小设置为980px（CSS像素）
43                         如果网页的宽度大于980px，移动端浏览器为了完整的呈现网页
44                         会对网页进行缩放，使网页可以完整显示
45                         
46                 - 由于pc端的网站在移动端呈现时，实际的像素比都在1:0.6以下,
47                     同时由于移动设备的像素本来就很小，这样就导致pc端页面在
48                     移动设备中呈现时会有一个非常非常不好效果
49                     
50                 - 如何确保网页在移动端中有一个比较好的浏览效果呢？
51                     
52                     
53                     
54          -->
55     </body>
56 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 可以通过meta标签来设置视口的大小 -->
 6         <!-- 可以通过修改视口的大小来改变像素比
 7             以iphone6 为例，视口大小如果设置375px
 8                 它的物理像素是 750px
 9                 像素比 375:750 = 1:2
10                 
11             每一部手机都会存在一个最佳的像素比，
12                 当它像素比处在该值时，会有一个最佳的浏览效果
13                 但是由于机型不同，这个像素比例也不同
14                 比如：iPhone6的最佳像素比 1:2
15                 
16             将手机的像素比设置为最佳像素比的视口大小，称为完美视口
17             所以我们编写移动端的页面时第一件事就是要设置浏览器的完美视口
18             
19             视口的设置只会影响移动设备，不会在pc端起作用
20          -->
21         <!-- <meta name="viewport" content="width=device-width"> -->
22         <!-- 
23             meta:vp + table 自动生成完美视口
24          -->
25         <meta name="viewport" content="width=device-width, initial-scale=1.0">
26         
27         <title></title>
28         <style>
29             *{
30                 margin: 0;
31                 padding: 0;
32             }
33             .box1{
34                 width: 375px;
35                 height: 200px;
36                 background-color: #bfa;
37             }
38             
39         </style>
40     </head>
41     <body>
42         
43         <div class="box1"></div>
44         <!-- 
45             像素
46                 1.像素分为两种物理像素和CSS像素
47                 2.不同的设备中物理像素的大小也不相同
48                 3.CSS像素和物理像素存在一定的比例
49                 4.移动端默认的视口大小为980像素（CSS像素）
50                 5.PC端页面在移动设备显示的效果不好
51                     原因是默认的相比太低了
52                     
53             解决移动端的页面问题
54                 1.PC端的网页不适合在移动端显示（内容太多）
55                 2.如果要在移动端有一个比较好显示效果，
56                     必须要修改CSS像素和物理像素的比例
57                     
58             像素比是由什么决定的？
59                 像素比：视口宽度 : 设备物理像素
60                         980           750         
61                         980           1080        
62                         
63                 需要将视口的宽度调小，以改变像素比
64          -->
65     </body>
66 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>移动端的适配</title>
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7         
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13             
14             html{
15                 /* 设置html的font-size */
16                 font-size: 0.13333vw;
17                 
18                 /* 
19                     有这么一个单位，1个它就等于1个html的font-size
20                     1rem = 1 html的font-size
21                  */
22             }
23             
24             .box1{
25                 /* 
26                     由于不同设备的视口大小不同，
27                         375px在不同的移动设备中所代表的意义也不同
28                         比如：
29                             在iphone6中，视口大小为375px，所以375px就是全屏的状态
30                             在iphone6 plus 视口大小为414px，所以375px会比全屏小一点
31                             在iphone5中，视口大小为320px，所以375px会超出屏幕，出现水平滚动条
32                         在写移动时，像素这个单位就基本上不能用了
33                         
34                     1vw = 1%视口宽度
35                     
36                     vw的参照物永远都是视口
37                     
38                     以750的设计图为例
39                         100vw 相当于 750px
40                         
41                         100vw --> 750px
42                         0.13333vw --> 1px
43                         6.53333vw --> 49px
44                         4.66666vw --> 35px
45                         
46                     将 html 的字体大小 设置为 font-size: 0.13333vw;
47                         这样意味着 1rem = 0.13333vw
48                         
49                         1rem = 1font-size(html)
50                         1font-size(html) = 0.13333vw
51                         1rem = 0.13333vw
52                         0.13333vw = 1px(设计图)
53                         1rem = 1px(设计图)
54                         
55                         
56                     49px * 35px 的元素    
57                  */
58                 width: 6.53333vw;
59                 height: 4.66666vw;
60                 background-color: #bfa;
61             }
62             
63             
64             .box2{
65                 /* 328 * 105 */
66                 width: 328rem;
67                 height: 105rem;
68                 background-color: pink;
69             }
70         </style>
71     </head>
72     <body>
73         
74         <div class="box1">
75             
76             
77             
78         </div>
79         
80         <div class="box2"></div>
81     </body>
82 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7         <style>
 8             
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13             
14             html{
15                 /* 
16                     如果font-size不够12px，在老版本的chrome中会被重置为12px
17                     导致适配失败，必须要确保值要大于12px
18                     将vw值扩大40倍，得到5.333333
19                     
20                     由于在这里我们给font-size扩大了40倍，
21                         所以在使用rem，必须要让像素除以40
22                  */
23                 font-size: 5.33333vw;
24             }
25             /* 
26                 在Chrome中，字体的大小最小0 表示没有，
27                     可显示的字体最小是12px，所以1-11px显示效果是一样的
28                     目前新版本的Chrome不会因为字体大小的问题影响到适配
29                     
30                     但是老版本Chrome，和一些移动端浏览器，
31                         会存在字体大小不能设置为12px以下的问题
32                         在这些浏览器如果将字体大小设置为12px以下时，浏览器会自动将其重置为12px
33                     
34              */
35             .box1{
36                 width: 18.75rem;
37                 height: 100px;
38                 background-color: #bfa;
39                 
40             }
41             
42         </style>
43     </head>
44     <body>
45         
46         <div class="box1">
47             我是一行文字
48         </div>
49         
50     </body>
51 </html>

 

posted @ 2020-04-15 21:34  全情海洋  阅读(2632)  评论(0)    收藏  举报