前端响应式布局

最新推荐文章于 2024-09-02 17:34:07 发布

黄大帅@lz

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量429

点赞数

分类专栏：前端（html+css+js）文章标签：前端 css html

本文链接：https://blog.csdn.net/gua_Piter/article/details/128817008

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

前端响应式布局

1.1 视口

即：屏幕的可视窗口

视口单位
视口转换
100vh = 100% = 整个页面的高度 = 整个高度的像素
100wh = 100% = 整个页面的宽度 = 整个宽度的像素
vw，wh与百分比的区别

百分比是基于[父元素] 的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。
在百分比与获取的都是页面宽高时，视口单位优势在于vh] 能够直接获取高度，而用%在没有设置 body高度情况下，是无法正确获得可视区域的高度
当页面有滚动条时，在百分比与ww获取的都是相同宽高时，100%是不包含滚动条的，100vw是包含滚动条的宽度/高度

1.2 em 与 rem

初识em

em是font size of the element的简称，是指相对于父元素的字体大小的单位。
em单位的主要问题是它们与元素的字体大小有关。因此，它们可能会层叠起来并导致意想不到的结果。

初识 rem

rem是font size of the rootelement的简称，是指相对于根元素的字体大小的单位。
在根元素的font-size属性中指定时，rem单位是指属性的初始值这意味着1rem等于html元素的字体大小(对于大多数浏览器而言其默认值为16px)

转换
rem布局

1加载s文件
2.所有数值除以100
3.使用rem单位

1.3 媒体查询的方法

1.3.1 媒体类型

all : 适用于所有设备
print : 适用于在打印预览的模式下
screen : 主要用于屏幕
speech : 主要用于语音合成器

    <style>
        @media all{
            h2{
            border: 2px solid black;
        }
        }
        h2{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h2>博爱u速度非法所得</h2>

在这里插入图片描述

1.3.2 媒体特性

width ：viewport的宽度，有 max-width 与 min-width 。
height ：viewport的高度，有max-height与 min-height。
aspect-ratio ：viewport的宽高比
orientation ：viewport的旋转方向，有 portrait (竖屏)与== landscape== (横屏)两种

@media  (orientation:landscape){
            h2{
            border: 2px solid black;
        }
        }
        h2{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h2>博爱u速度非法所得</h2>

1.3.3 逻辑运算符

and ：用于将多个媒体查询规则组合成单条媒体查询
not ：用于否定媒体查询，如果不满足这个条件则执行内容，否则将不执行
only ：用于旧版浏览器识别媒体类型使用
逗号：用于将多个媒体查询合并为一个规则

 @media not all and (max-width:1000px) and (orientation:landscape){
            h2{
            border: 2px solid black;
        }
        }
        h2{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h2>博爱u速度非法所得</h2>

1.3.4 link标签方式

  <!-- 横屏时插入样式 -->
    <link rel="stylesheet" href="./1.css" media="(orientation:landscape)">
    <!-- 竖屏时插入样式 -->
    <link rel="stylesheet" href="./2.css" media="(orientation:portrait)">
</head>
<body>
    <div class="bos">esafchopii</div>
</body>
</html>

在这里插入图片描述

1.4 响应式断点设置

1.4.1 编写位置

添加到样式表底部，对css进行优先级的覆盖

1.4.2 阈值设定

常见阈值：
在这里插入图片描述

黄大帅@lz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端响应式布局

width ：viewport的宽度，有 max-width 与 min-width。height ：viewport的高度，有max-height与 min-height。not ：用于否定媒体查询，如果不满足这个条件则执行内容，否则将不执行。100wh = 100% = 整个页面的宽度 = 整个宽度的像素。100vh = 100% = 整个页面的高度 = 整个高度的像素。(竖屏)与== landscape== (横屏)两种。and ：用于将多个媒体查询规则组合成单条媒体查询。
复制链接

扫一扫

专栏目录