美文网首页
自适应方案 及 尺寸

自适应方案 及 尺寸

作者: 糕糕AA | 来源:发表于2019-10-06 21:26 被阅读0次
    • px:像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

    • em:相对于父元素的font-size,默认是为浏览器字体尺寸16px

    • rem:相对大小,但相对的只是HTML根元素的font-size。

        html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}  body {font-size: 1.4rem;/*1.4 × 10px = 14px */}  h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
    
        <html data-dpr:"2" class="iphone6" style="font-size:xxxpx"></html>
    
    当页面domready后设置document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
    
    • %:百分比的参照物是父元素,

    • vw:1vw等于视口宽度的1%。

    • vmin:选取vw和vh中最小的那个

    @media媒体查询

    PC和移动端都能按照不同的设计稿显示出来,那么需要做的就是去设置媒体查询。

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     /* Styles */
    }  /*使用例子*/
    

    相关文章

      网友评论

          本文标题:自适应方案 及 尺寸

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