搞响应式网页必备基础

  • Post author:
  • Post category:其他


 @media screen and (max-width: 799px) {

    }

    html {
      font-size: calc(100vw / 799 * 16)
        /*100px*/
      ;
    }

    @media screen and (min-width: 800px) {
      
    }

用媒体查询控制布局,比如元素的显示与隐藏,位置的变化等

 font-size: calc(100vw / 750 * 100);
 font-size:13.333333vw;
 /*设计稿宽度大小是750的时候,100vw/799表示1px的大小,即为0.1333333vw,
 所以如果我们想取font-size为100px时(方便取值),就乘100即可,也就是13.333333vw,
 这样,网页的元素的1rem=100px,并且随着屏幕的大小变化而实时变化*/

用calc函数配合vw控制内容实时变化,也就是网页元素随着屏幕的大小变化而变化,1vw代表屏幕的百分之一,100vw就是百分百,就是整个屏幕的宽度,同理,vh也如此

参考:https://www.jianshu.com/p/8817e26d3c46



版权声明:本文为qq_43516282原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。