九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

方式1

1.對于設(shè)計稿的尺寸轉(zhuǎn)換為vw單位，我們使用Sass函數(shù)編譯

//iPhone 6尺寸作為設(shè)計稿基準(zhǔn)$vm_base: 375; @function vw($px) {    @return ($px / $vm_base) * 100vw;}2.無論是文本還是布局高寬、間距等都使用 vw 作為 CSS 單位.mod_nav {    background-color: #fff;    &_list {        display: flex;        padding: vm(15) vm(10) vm(10); // 內(nèi)間距        &_item {            flex: 1;            text-align: center;            font-size: vm(10); // 字體大小            &_logo {                display: block;                margin: 0 auto;                width: vm(40); // 寬度                height: vm(40); // 高度                img {                    display: block;                    margin: 0 auto;                    max-width: 100%;                }            }            &_name {                margin-top: vm(2);            }        }    }}3.1物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實(shí)現(xiàn)。//code from http://caibaojian.com/vw-vh.html.mod_grid {    position: relative;    &::after {        // 實(shí)現(xiàn)1物理像素的下邊框線        content: '';        position: absolute;        z-index: 1;        pointer-events: none;        background-color: #ddd;        height: 1px;        left: 0;        right: 0;        top: 0;        @media only screen and (-webkit-min-device-pixel-ratio: 2) {            -webkit-transform: scaleY(0.5);            -webkit-transform-origin: 50% 0%;        }    }    ...}4.對于需要保持高寬比的圖，應(yīng)改用 padding-top 實(shí)現(xiàn).mod_banner {    position: relative;    padding-top: percentage(100/700); // 使用padding-top    height: 0;    overflow: hidden;    img {        width: 100%;        height: auto;        position: absolute;        left: 0;        top: 0;     }}

方式2

// rem 單位換算：定為 75px 只是方便運(yùn)算，750px-75px、640-64px、1080px-108px，如此類推$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準(zhǔn)值@function rem($px) {     @return ($px / $vm_fontsize ) * 1rem;}// 根元素大小使用 vw 單位$vm_design: 750;html {    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;     // 同時，通過Media Queries 限制根元素最大最小值    @media screen and (max-width: 320px) {        font-size: 64px;    }    @media screen and (min-width: 540px) {        font-size: 108px;    }}// body 也增加最大最小寬度限制，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小body {    max-width: 540px;    min-width: 320px;}