响应式布局

最新推荐文章于 2024-10-16 21:35:12 发布

IT噜噜

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量105

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Ghlys/article/details/128759981

版权

响应式布局

视口viewport

就是窗口的可视范围

视口单位

名称	含义
vw	相对于视口的宽
vh	相对于视口的高
vmin	选取vh与vw最小的那个
vmax	选取vh与vw最大的那个
em	相对于父元素的字体大小
rem	相对于根元素的字体大小

vw，vh与百分比的区别

百分比：
- 相对于父元素
- 父元素没有高度时高度为0
- 100%不包含滚动条
vw,vh：
- 相对于视口
- 没有高度是窗口的百分比
- 包含滚动条

rem的使用

加载js文件
所有数值除以100

使用rem单位

rem375.js文件码源

(function(doc, win) {
    var reCreateStyle = function() {
        var style;
        if (style = document.getElementById("forhtml")) {
            style.parentNode.removeChild(style);
        }

        style = document.createElement("style");
        style.id = "forhtml";
        var head = document.he || document.getElementsByTagName("head")[0];
        head.appendChild(style);
        var fontSize = 25.00 * parseFloat(document.documentElement.clientWidth, 10) / 375.00;
        style.appendChild(document.createTextNode("html{font-size:" + fontSize + "px!important;}"));
    };
    var docEI = doc.documentElement,
        resizeEvt = `orientationchange` in window ? `orientationchange` : `resize`,
        recalc = function() {
            reCreateStyle();
        }
    loadcalc = function() {
        reCreateStyle();
        var bodyEI = document.body;

        if (bodyEI.className == 'loading') {
            removeClass(bodyEI, 'loading');
        }
    }
    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, loadcalc, false);
    doc.addEventListener(`DOMContentLoaded`, loadcalc, false);
})
(document, window);

媒体查询

媒体类型


all	所有设备
print	打印预览
screen	屏幕
speech	语音合成器

示范：@media screen{}

媒体特性


width	有max-width,min-width
height	有max-height,min-height
aspect-ratio	宽高比
orientation	有portrait(竖屏)，landscape(横屏)

示范：@media (max-width:700px){}

逻辑操作符


and	将多个媒体特性组合成一条媒体查询
not	否定媒体查询，如果不符合这个媒体查询条件就执行
only	旧浏览器使用
逗号	将多个媒体类型合并成一个规则，只要其中任何一个为真，整个媒体语句就返回真。相当于or

示范：@media not screen,print and(max-width:1200px) and (min-width:600px){}