响应式布局-笔记

daitools

于 2021-10-13 16:10:40 发布

阅读量134

点赞数

分类专栏：笔记心得文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45894006/article/details/120746173

版权

笔记同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

心得

36 篇文章 0 订阅

订阅专栏

一、媒体查询

根据屏幕的尺寸来改变css样式来达到不同的效果–参考资料

@media screen and (max-device-width:300px) {
    body {
        background-color: rgb(170, 32, 90);
    }
}

@media screen and (min-device-width:300px) and (max-device-width:500px) {
    body {
        background-color: rgb(56, 218, 150);
    }
}

@media screen and (min-device-width:500px) {
    body {
        background-color: rgb(37, 34, 233);
    }
}

通过标签使用媒体查询
<link rel="stylesheet" href="css/pc.css" media="(min-device-width:480px)">
<link rel="stylesheet" href="css/md.css" media="(max-device-width:480px)">
<script src="js/md.js" media="(max-device-width:480px)"></script>
<script src="js/pc.js" media="(min-device-width:480px)"></script>

二、media常用参数

</head>
<!-- height、width：浏览器可视高度宽度
    device-height、device-width：设备高度和宽度（常用） -->
<style>
    /* 当最大宽度为300px时的样式 */
    
    @media screen and (max-device-width:300px) {
        div {
            width: 100%;
        }
    }
    /* 当宽度在300px和500px之间的样式 */
    
    @media screen and (min-device-width:300px) and (max-device-width:500px) {
        div {
            width: 50%;
        }
    }
    /* 当最小宽度在500px时的样式 */
    
    @media screen and (min-device-width:500px) {
        div {
            width: 33.3%;
        }
    }
    
    .div0 {
        width: 100%;
    }
    
    div {
        float: left;
        height: 100px;
    }
    
    .div0 div:nth-child(1) {
        background-color: aqua;
    }
    
    .div0 div:nth-child(2) {
        background-color: rgb(104, 123, 207);
    }
    
    .div0 div:nth-child(3) {
        background-color: rgb(226, 188, 85);
    }
</style>

<body>
    <div class="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

三、根据设备选择网页

<script>
var re = () => {
    //获取设备信息
    let agent = navigator.userAgent.toLowerCase();
    //匹配正则表达式
    let device = /ipone|android|windows mobile/;
    if ((device).test(agent))
        alert("手机端！");
    else
        alert("pc端");
}
window.addEventListener("load", re);
</script>

<body>
案例-根据设备选择网页
</body>

四、flex简介

参考大佬的博客

大佬的实战

flex是设定弹性盒子，跟float的作用类似在父元素中使用，用于规范子元素
主要属性：

1.flex-direction	row|row-reverse|column|column-reverse
2.flex-wrap			norwrap|wrap|wrap-reverse
3.flex-flow			
4.justify-content: flex-start | flex-end | center | space-between | space-around
5.align-items:align-items: flex-start | flex-end | center | baseline | stretch;
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;

1、flex-direction   子元素在父元素盒子中的排列方式
	row:默认值，从左到右按行排列
	row-reverse:与row相同顺序相反
	column:从上到下顺序排列
	column-reverse：从上到下反序排列
2、flex-wrap    子元素在父元素中排列是否换行
	nowrap：默认值，不换行或不换列
	wrap：换行
	wrap-reverse：反序换行
3、flex-flow    direction和wrap的简写
	语法：flex-flow: direction wrap;

五、flex在交叉轴上的对齐方式

属性：algin-items 在父元素中使用，用于规范子元素在容器中的位置
属性值：
1、flex-start 在交叉轴上半部分分布
2、flex-end 在交叉轴下半部分分布
3、center 在交叉轴中间部分分布
适用于交叉轴上面的容量有剩余

点击测试

六、flex子元素伸缩

当父元素大小发生改变时，会有空间溢出和剩余的状况
即子元素所占空间超出父元素所占空间，或者不能占满父元素空间，此时要做的操作便是将子元素进行伸缩以占满父元素

属性：都是在子元素中使用，用于规范子元素相对于父元素所发生的改变
flex-basis 用来设定子元素的基准值（子元素的宽度），该属性会使属性width失效
flex-grow 设置子元素的扩展比例默认不扩展比例按数字来
flex-shrink 用来设定子元素的缩小比例默认不缩小比例按数字来
flex 上面三个属性的缩写
语法：flex: grow shrink basis

七、使用flex剩余空间调整

属性：justify-content 在父元素中使用，用来定义容器中的剩余空间

属性值：
1、flex-start：默认值，将余量放右侧
2、flex-end：将余量放左侧
3、center：将余量均分放两侧
4、space-between:将余量均分放中间间隙，两边不留空间
5、space-around：将余量均分放中间间隙，两边留空间

八、rem动态改变字体大小

Rem详解—Rem实战进阶

rem的计算公式

1、你有一个设计稿A（假定640px），有一个预设的rem和px的比例B（假如是1rem = 10px）

2、获取用户浏览器的可视区域的宽度C（假如是320px），那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知

3、原因是你假定屏幕可以容纳多少个rem，这是一个固定比例（如这里就是64rem）

1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

<script>
var c = () => {
    let w = document.documentElement.clientWidth;
    let m = ((20 * w / 320) > 40 ? 40 + "px" : (20 * w / 320 + "px"))
    document.documentElement.style.fontSize = m;
}
window.addEventListener("load", c);
window.addEventListener("resize", c)
</script>
<style>
body {
    font-size: 20px;
}

div {
    font-size: 1rem;
}
</style>

<body>
<div>123</div>
</body>

懒人公式

var fun = function (doc, win) {
var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
        //可以根据实际需要修改
        docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

十、vw-vh

参考资料

daitools

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局-笔记

一、媒体查询根据屏幕的尺寸来改变css样式来达到不同的效果–参考资料@media screen and (max-device-width:300px) { body { background-color: rgb(170, 32, 90); }}@media screen and (min-device-width:300px) and (max-device-width:500px) { body { background-color:
复制链接

扫一扫