响应式布局

最新推荐文章于 2022-05-03 12:19:41 发布

vousmevoyez0613

最新推荐文章于 2022-05-03 12:19:41 发布

阅读量124

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/108961325

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

0. 常见的css单位：

px，绝对长度单位，相对于显示器屏幕分辨率，最常用。
em 相对单位。不同的属性有不同的参照值。
对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
对于border, width, height, padding, margin, line-height等这些属性，使用 em单位的计算方式是参照该元素的 font-size，1em等于该元素设置的字体大小。如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
rem 相对单位。是相对于根元素 html 的 font-size 来计算的，常用于响应式。
% 占父元素的比例。
vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
vmin：基于 vw 和 vh 中的最小值来计算，1vmin 等于最小值的百分之一
vmax：基于 vw 和 vh 中的最大值来计算，1vmax 等于最大值的百分之一

1.响应式布局

方式一：flex弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex弹性布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: red; 
    width: 20px;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    width: 20px;
}
</style>
<body>
	<!--两边定宽，中间自适应-->
    <div class=container>
        <div class=left></div>
        <div class=middle></div>
        <div class=right></div>
    </div>
</body>
</html>

方式二：
Media Queries（媒体查询）是响应式设计的核心。
一般先使用Media Queries，根据不同的设备屏幕设置根元素font-size，再使用rem来实现响应式布局

使用该方式的弊端：具有“阶梯性”
方式三：使用百分比实现响应式布局，这种方式比较笨
方式四：使用vw/vh实现响应式布局

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
方式五：使用bootstrap的栅格系统。