动态REM

作者: 饥人谷_Leonardo | 来源:发表于2018-08-17 10:44 被阅读1次

    什么是rem?

    rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 )

    rem和em区别?

    rem:(root em,根em)根元素的fort-size的大小计算
    em:相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被设置,则相对于浏览器的默认字体尺寸。 em 的值并不是固定的, em的值会继承父级元素的字体大小。

    rem手机端方案特点?

    • 所以手机端显示界面比例都一样,只是大小不同
    • 1 rem==html fort-size ==viewport width
    • 在线转换工具: http://pxtoem.com/

    JS动态调整REM

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
     maximum-scale=1.0, minimum-scale=1.0">
     <script>
         var pageWidth = window.innerWidth
         document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
     </script>
    

    REM 可以与其他单位同时存在

     font-size: 16px;
     border: 1px solid red;
     width: 0.5rem;
    

    在 SCSS 里使用 PX2REM

    • npm config set registry https://registry.npm.taobao.org/

    • touch ~/.bashrc

    • echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc

    • source ~/.bashrc

    • npm i -g node-sass

    • mkdir ~/Desktop/scss-demo

    • cd ~/Desktop/scss-demo

    • mkdir scss css

    • touch scss/style.scss

    • start scss/style.scss

    • node-sass -wr scss -o css

      编辑 scss 文件就会自动得到 css 文件

      在 scss 文件里添加

      @function px( $px ){
        @return $px/$designWidth*10 + rem;
      }
      
      $designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。
      
      .child{
        width: px(320);
        height: px(160);
        margin: px(40) px(40);
        border: 1px solid red;
        float: left;
        font-size: 1.2em;
      }
      
      

      即可实现 px 自动变 rem


    屏幕适配布局问题

    响应式布局
    流式布局+媒体查询
    • 用来解决不同宽度的布局问题,父级宽度不够的时候,子级节点会“挤下去”
      使用css3,根据屏幕分辨率进行不同的样式应用
    优劣:
    • 这种布局通吃pc和移动端,做到精细处,两者的效果都很好,
    • 缺点是媒体查询是有限的,也就是可以枚举出来的
    • 对设计要求简单、清晰、复杂的设计稿会直接弄死前端,同时需要多个设计稿
    • css3低版本浏览器不支持
    伸缩布局

    使用的是Flexbox ,有兼容性问题
    整体思路:考虑把一个元素变成一个伸缩容器 -->伸缩容器中子元素的排列方式 -->子元素所占空间

    伸缩布局的属性:

    1 主轴方向 flex-direction:row /row-reverse(右到左)/column/column-reverse(下到上)
    2 伸缩项目在主轴的对齐方式 justify-content:flex-start /flex-end/center/space-between/space-around
    3 伸缩项目是否换行 flex-wrap:nowrap/wrap
    4 换行后对齐方式 align-content:stretch:拉伸/flex-start...sapce-around
    5 不换行对齐方式 align-items 默认拉伸 值同上

    伸缩项目的属性:

    1 伸缩项目在伸缩容器中所占的空间 flex 值 数字 比例
    2 自己的对齐方式 align -self:start /end/center
    3 排列顺序 order 数字 值越小越靠前

    相关文章

      网友评论

          本文标题:动态REM

          本文链接:https://www.haomeiwen.com/subject/bvkkbftx.html