响应式原理

最新推荐文章于 2024-05-27 10:01:44 发布

桃花扇J

最新推荐文章于 2024-05-27 10:01:44 发布

阅读量201

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105493546

版权

Bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

响应式的特点

网页的宽度自动调整
尽量少用绝对宽度
字体要用相对单位rem、em
布局使用浮动、弹性布局

规则

@chartset 定义编码
@import 引入css文件（css模块化）
@font-face 自定义字体
@keyframes 定义animation动画里的关键帧
@media 媒体查询

媒体查询

1.媒体类型

all —— 所有设备

print —— 打印机设备

screen —— 彩色的电脑屏幕

speech —— 听觉设备，可以把页面的内容以语音的方式呈现的设备

已废弃设备：tty、tv、projection、handled、braille、embossed、aural

【举例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
        }
        @media all {
            div {
                background-color: #f99;
            }
        }
        @media print {
            div {
                width: 200px;
            }
        }
        @media screen {
            div {
                color: #fff;
            }
        }
    </style>
</head>
<body>
    <div>桃花扇</div>
</body>
</html>

【结果】在电脑中显示如下

在打印机显示如下

2.媒体特性

width

min-width 最小宽度，当屏幕宽度大于该值时，使用该样式

max-width 最大宽度，当屏幕宽度小于该值时，使用该样式

height

min-height 最小高度，当屏幕高度大于该值时，使用该样式

max-height 最大高度，当屏幕高度小于该值时，使用该样式

orientation 方向

landscape 横屏（宽度大于高度）

portrait 竖屏（高度大于宽度）

aspect-ratio 宽度比

-webkit-device-pixel-ratio 像素比（wibkit内核的私有属性）

【举例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
        }
        @media (min-width: 400px) {
            div {
                background-color: #f88;
            }
        }
        @media(max-width:300px) {
            div {
                background-color: #88f;
            }
        }
    </style>
</head>
<body>
    <div>桃花扇</div>
</body>
</html>

【结果】

当屏幕大于等于400px时，背景颜色为#f88(桃粉色)

当屏幕宽度小于等于300px时，背景颜色为#88f

当屏幕宽度间与300px和400px中间时，其样式为默认样式

【注】若max-width与min-width的临界值相同，则在临界值这一点，使用的是后面的样式，即后面的代码覆盖前面的代码

3.逻辑运算符

and 合并多个媒体查询（与）

，匹配某个媒体查询（或）

not 对媒体查询结果取反

only 仅在媒体查询成功后应用样式（防范老旧浏览器）

【举例】not

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
        }
        @media not all and (max-width:300px) {
            div {
                background-color: #f88;
            }
        }
    </style>
</head>
<body>
    <div>桃花扇</div>
</body>
</html>

【结果】

当屏幕宽度大于300px时，使用该样式

桃花扇J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式原理

响应式的特点网页的宽度自动调整尽量少用绝对宽度字体要用相对单位rem、em 布局使用浮动、弹性布局规则@chartset 定义编码 @import 引入css文件（css模块化） @font-face 自定义字体 @keyframes 定义animation动画里的关键帧 @media 媒体查询媒体查询1.媒体类型all —— 所有设备print —— 打...
复制链接

扫一扫

专栏目录