响应式布局中rem、em、vw设置字体大小自适应

怼烎@ 2022-06-10 11:28 1042阅读 0赞

rem 是指根元素（root element，html）的字体大小，从遥远的 IE6 到 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。  
这样一个新的单位兼容性如何呢？   
       IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。  
       em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。不方便计算。所以 rem 的出现再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 。  
       例如：  
       html\{   
            font-size:62.5%; // 10÷16=62.5%  
        \}  
        body\{   
            font-size:12px;  
            font-size:1.2rem ; // 12÷10=1.2  
        \}  
        p\{   
            font-size:14px;  
            font-size:1.4rem;  
        \}  
      为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。  
      但是，这样写字体并不能根据屏幕的大小进行自适应。  
      要实现字体自适应有两种方法：  
      1、媒体查询  
       html \{   
           font-size: 62.5%;  
       \}  
       @media only screen and (min-width: 481px)\{   
           html \{   
               font-size: 94%!important;  
           \}  
       \}  
       @media only screen and (min-width: 561px)\{   
           html \{   
               font-size: 109%!important;  
           \}  
  
       \}  
       @media only screen and (min-width: 641px)\{   
           html \{   
               font-size: 125%!important;  
           \}  
       \}  
       body\{   
           font-size:12px;  
           font-size:1.2rem ; // 12÷10=1.2  
       \}  
       p\{   
           font-size:14px;  
           font-size:1.4rem;  
       \}  
  
  
      <div>  
       <p>这个效果对设计师的要求也是非常严格的，</p>  
        例如你需要指定一个规范的宽度进行设计，  
        这样做的目的是为了在移动端能高清显示。不得不说这是个非常好的东西。  
    </div>  
     ![效果图][124056t4w4k81g1kd6sbrg.jpg]  
   我的页面中设置了如上的代码来控制不同设备下的字体大小显示使其达到自适应。  
   2、通过JS去动态计算根元素的font-size，这样的好处是所有设备分辨率都能兼容适配  
         链接： [JS去动态计算根元素的font-size][JS_font-size]  
  
   3. 有一种解决的方案，用Viewport的方法。  
          %vw = %viewport width  
  
          我们用%vw来定义字号，也就是说用屏幕宽度的百分比来定义字号的大小。例如：  
          h1 \{   
               font-size: 2.5vw;  
          \}  
          这样一来，无论屏幕宽度如何变化，h1的字号会保持在Viewport宽度的2.5%的大小。  
   
         考虑到未来响应式设计的开发，如果你需要，浏览器的高度也可以基于百分比值调整。但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式，比如字体大小不会随着你窗口改变而改变，如今css3引入的新单位明确解决这一问题。  
  
View Demo  
  
css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 参照demo案例对照下面四个容器的css样式:  
  
.demo \{ width: 100vw; font-size: 10vw; \} .demo2 \{ width: 80vw; font-size: 8vw; \} .demo3 \{ width: 50vw; font-size: 5vw; \} .demo4 \{ width: 10vw; height: 50vh; \}  
大家可以把demo窗口收缩来查看不同大小时候的变化。目前这款css3的应用支持所有主流浏览器，IE必须10以上。  
  
给margin padding 设置rem  
        上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的，我们就按照最大的640去切图，切图的时候如果我们要设置margin怎么banner，设计图的值加入是10px的间距，我们通过640的比例去计算：  
margin-top:.5rem;   
padding-top:1rem   
       上面分别是设计图上的间距10px和20px计算成rem的方法，大家可以以此类推，如果你的设计图是640设计的就可以用上面的方法，反正每次以最大的值来计算就可以了。  
  
给height width 设置rem  
       实际开发中大家最常设置的估计就是height width值了，为了做到各个设备下长度自己相应，许多开发人员会用百分比来做，这个是没有问题，但是其实很多场景下用rem比百分比更加灵活，在我实际开发中，一般我只在大块的div布局里面用百分比，元素的设置一般都用rem来。例如：  
height:100px;   
width:50px;   
给border 设置rem  
       其实就连border我们也可以用rem来做，但是貌似现在的安卓手机对border用rem单位有一小部分不支持，在我开发测试发现了，高版本的安卓浏览器支持，但是低版本的有许多都不支持，具体要不要使用就看你们自己的情况。  
border:.2rem solid \#cccccc;  
  
总结  
       rem的使用其实我可能是只是总结了大家比较常用的一些属性，其实他的范围肯定不止是这么多，实际的项目开发中我相信大家在使用他的过程会发现许多惊喜的，非常希望大家留言讨论这一章的内容。有什么问题我会第一时间反馈。

[124056t4w4k81g1kd6sbrg.jpg]: http://cdn.attach.qdfuns.com/notes/pics/201608/23/124056t4w4k81g1kd6sbrg.jpg
[JS_font-size]: http://www.data321.com/html-css/20160520187/DongTaiJiSuanhtmlDefont-size