前言 響應(yīng)式數(shù)據(jù)大屏開發(fā)rem、%、vh/vm

我們?cè)陂_發(fā)數(shù)據(jù)大屏的時(shí)候難免會(huì)需要解決響應(yīng)式問題 ，那么響應(yīng)式是什么呢？

響應(yīng)式：響應(yīng)式布局是元素隨著屏幕發(fā)生寬高大小變化 + 盒子布局發(fā)生變化
通俗的來說：
自適應(yīng)：元素隨著屏幕發(fā)生寬高大小變化

有哪些響應(yīng)式的技術(shù)？

1.媒體查詢 ：@media screen and
2.百分比布局：%
3.vh/vm布局：100vh/vm
4.rem布局：根據(jù)根元素的font-size大小變化
5.flex布局：display：flex

實(shí)戰(zhàn)：

• 媒體查詢

什么是媒體查詢？
媒體查詢就是對(duì)不同分辨率的屏幕編寫不同的css樣式來達(dá)到適配的目的
也就是在不同分辨率的區(qū)間寫上不同的樣式，不需要改變的樣式可以寫在外面變成公共樣式

媒體查詢有哪些屬性呢？

only：限定某種設(shè)備。
screen：彩色電腦屏幕，是媒體類型里的一種。
and：關(guān)鍵字，連接多個(gè)表達(dá)式。
not：關(guān)鍵字，排除不支持的媒體類型。
max-width 是目標(biāo)顯示區(qū)域的寬度，例如，瀏覽器寬度。
max-device-width 是設(shè)備整個(gè)顯示區(qū)域的寬度，例如，真實(shí)的設(shè)備屏幕寬度。
device-aspect-ratio 可以適配特定屏幕長(zhǎng)寬比的設(shè)備，設(shè)備屏幕長(zhǎng)寬比為4:3、16:9
上代碼：

這里我們要兼容多個(gè)尺寸大小的屏幕 所以用 and

        .div{
        	background-color: #fff;
        }
        @media screen and (max-width:800px) {
            /* 屏幕尺寸小于等于700時(shí)下面的樣式執(zhí)行 */
            .div{
                background-color: red;
            }
        }
        
        @media screen and (max-width:700px) {
            .div{
                background-color: bule;
            }
            .head{
               display:flex;
            }
        }
        
        @media screen and (min-width:300px) and (max-width:500px) {
            .div{
                background-color: green;
            }
             .head{
               display:nonoe;
            }
        }

• 百分比布局

百分比布局就是把需要用到尺寸的都用百分比
億點(diǎn)小知識(shí)：百分比是繼承父級(jí)的大小的百分比

* {
    margin: 0;
    padding: 0;
}
body {
    width: 1000px;
    height: 800px;
}
div{
	width:100%; // 等于父級(jí)的 1000px
	height:100%;// 等于父級(jí)的 800px
}

• vh/vm布局

是根據(jù)屏幕的尺寸作為單位：
vm就是屏幕寬的尺寸 、 vh就是屏幕高的尺寸

body {
    width: 100vm; // 屏幕寬一樣寬
    height: 50vh;// 屏幕的高的一半
}

• rem布局

rem 根據(jù)根元素的font-size大小作為單位
例如：根元素的font-size是 16px 那么 1rem = 16px

var documentElement = document.documentElement;
function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕寬度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}

第二種下載插件：使用pxtorem 實(shí)現(xiàn)rem布局
1.安裝postcss-pxtorem --save

npm i postcss-pxtorem --save

2.在項(xiàng)目根目錄創(chuàng)建postcss.config.js文件

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            //根元素字體大小
            rootValue: 16,
            //匹配CSS中的屬性，* 代表啟用所有屬性
            propList: ['*'],
            //轉(zhuǎn)換成rem后保留的小數(shù)點(diǎn)位數(shù)
            unitPrecision: 5,
            //小于12px的樣式不被替換成rem
            minPixelValue: 3,
             //忽略一些文件，不進(jìn)行轉(zhuǎn)換，比如我想忽略 依賴的UI框架
            exclude: ['node_modules']
        }
    }
}

3.創(chuàng)建resize.js并使用

function resizeRem() {
    const scale = document.documentElement.clientWidth / 1920
    document.documentElement.style.fontSize = 16* scale + 'px'
}
resizeRem()
window.onresize = function () {
    resizeRem()
}

以上就是響應(yīng)式數(shù)據(jù)大屏開發(fā)感謝大家的閱讀
如碰到其他的問題 可以私下我 一起探討學(xué)習(xí)
如果對(duì)你有所幫助還請(qǐng) 點(diǎn)贊 收藏謝謝~！
關(guān)注收藏博客 作者會(huì)持續(xù)更新…文章來源地址http://www.zghlxwxcb.cn/news/detail-481095.html

到了這里，關(guān)于響應(yīng)式數(shù)據(jù)大屏開發(fā)rem、%、vh/vm的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！