当前位置： 首页 > news >正文

响应式设计的实现方式

news 2026/2/2 20:18:30

一. 什么是响应式

响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。

响应式网站常见特点：

1. 同时适配PC+平板+手机。

2. 标签导航在接近手持终端设备时改变为经典的抽屉式导航。

3. 网站的布局会根据视口来调整模块的大小和位置。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端，页面头部必须有meta声明viewport。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"

width=device-width: 是自适应手机屏幕的尺寸宽度

maximum-scale: 是缩放比例的最大值

inital-scale: 是缩放的初始化

user-scalable: 是用户的可以缩放的操作

二. 实现响应式布局的方式

1. 媒体查询

2. 百分比

3. vw/vh

4. rem

1. 媒体查询

CSS3中增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体查询，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。

使用@media查询，为不同尺寸的屏幕设定不同的CSS样式

@media screen and (max-width:1920px){...}<style>
#div0{width: 150px;height: 200px;
}
// 视口的宽度改变
@media screen and (min-device-width:100px) and (max-device-width:300px){#div0{background-color: red;}
}@media screen and (min-device-width:301px) and (max-device-width:500px){#div0{background-color: blue;}
}
</style>

@media常用参数

属性名称作用
width，height浏览器可视宽度，高度
device-width设备屏幕的宽度
device-height设备屏幕的宽度
<style>
div{width: 200px;height:200px;
}
// 浏览器的宽度改变
@media screen and (min-width:500px) and (max-width:700px){div{background-color: red;}
}@media screen and (min-width:701px){div{background-color: blue;}
}
</style>

例子 

<style>#div0 {width: 100%;height: 500px;}#div0 div {float: left;height: 100px;}/* 1行三个div */@media screen and (min-device-width:400px){#div0 div {width: 33.3%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}/* 2行三个div */@media screen and (min-device-width:300px) and (max-device-width:399px) {#div0 div {width: 50%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}/* 3行三个div */@media screen and (min-device-width:200px) and (max-device-width:299px) {#div0 div {width: 100%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}
</style>
<body><div id="div0"><div></div><div></div><div></div></div>
</body>

媒体查询——其他引入方式1 

<style>#div0 {width: 100%;height: 500px;}#div0 div {float: left;height: 100px;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}
</style>
<style media="(min-device-width:300px) and (max-device-width:399px)">#div0 div {width: 50%;}
</style>
<style media="(min-device-width:400px) and (max-device-width:499px)">#div0 div {width: 33.33%;}
</style>

媒体查询其他引入方式——2（link引入） 

// 写在Link标签中，有条件的引入外部样式表
<link href="css/test.css" rel="stylesheet">
<link href="css/css-1.css" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:300px)">

2. 百分比

通过百分比单位%来实现响应式的效果。

比如当浏览器的宽度或者高度发送变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height，width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素。

3. vw/vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

4. rem

rem是指相对于根元素的字体大小的单位。

默认情况下浏览器字体大小为16px。此时1rem = 16px

可以针对不同的设备分辨率改变font-size的值。

@media screen and (max-width: 414px) {html{font-size: 18px}
}@media screen and (max-width: 375px) {html{font-size: 16px}
}@media screen and (max-width: 320px) {html{font-size: 12px}
}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>let c = () => {let w = document.documentElement.clientWidth // 获取设备的宽度let n = (20 * (w / 320) > 40 ? 40 + "px" : 20 * (w / 320) + "px") // 根字体大小document.documentElement.style.fontSize = n}window.addEventListener("load", c)window.addEventListener("resize", c)</script><style>html {font-size: 16px; // 页面一加载这里就会被重置替代}div {font-size: 1rem;}</style></head><body><div>123</div></body>
</html>

5. flex

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。 

flex-direction：子元素在父元素盒子中的排列方式

属性值作用
row默认值。按从左到右的顺序显示
row-reverse与row相同，但是以相反的顺序
column灵活的将项目垂直显示，按从上到下的顺序
column-reverse与column相同，但是以相反的顺序

flex-wrap：子元素在父元素盒子中的是否换行

属性值作用
nowrap默认值，不换行或不换列
wrap换行或换列
wrap-reverse换行或换列，但以相反的顺序

flex-flow：flex-direction和flex-wrap属性的简写形式。语法：flex:<flex-direction>||<flex-wrap>

justify-content，用来在存在剩余空间时，设置为间距的方式

属性值作用
flex-start默认值，从左到右，挨着行的开头
flex-end从右到左，挨着行的结尾
center居中显示
space-between平均分布在该行上，两边不留间隔空间
space-around平均分布在该行上，两边留有一半的间隔空间

align-items，设置每个flex元素在交叉轴上的默认对齐方式（单行看待）

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center居中显示

align-content，设置每个flex元素在交叉轴上的默认对齐方式（整体看待）

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center位于容器的中心
space-between之间留有空白
space-around

两端都留有空白

其他属性 

属性值作用
flex-basis设置弹性盒伸缩基准值（设置后，宽度将不再生效）
flex-grow设置弹性盒子的扩展比率
flex-shrink设置弹性盒子的缩小比率
flexflex-grow，flex-shrink，flex-basis的缩写

特殊写法 

属性作用
flex:autoflex: 1 1 auto
flex: noneflex: 0 0 auto

flex: 0%

flex:100px

flex: 1 1 0%

flex: 1 1 100px

flex:1flex: 1 1 0%

相关文章：

响应式设计的实现方式

一. 什么是响应式 响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境&#xff08;系统平台&#xff0c;屏幕尺寸&#xff0c;屏幕定向等&#xff09;进行相应的响应和调整。 响应式网站常见特点&#xff1a; 1. 同时适配PC平板手机。 2…...

编程日记 2023/10/2 17:07:23

PHP 反序列化漏洞：__PHP_Incomplete_Class 与 serialize(unserialize($x)) !== $x；

文章目录 参考环境声明__PHP_Incomplete_Class灵显为什么需要 __PHP_Incomplete_Class&#xff1f;不可访问的属性 serialize(unserialize($x)) $x;serialize(unserialize($x)) ! $x;雾现__PHP_Incomplete_Class 对象与其序列化文本的差异试构造 __PHP__Incomplete_Class 对象…...

编程日记 2023/10/2 17:06:22

TempleteMethod

TempleteMethod 动机 在软件构建过程中&#xff0c;对于某一项任务&#xff0c;它常常有稳定的整体操作结构&#xff0c;但各个子步骤却有很多改变的需求&#xff0c;或者由于固有的原因 &#xff08;比如框架与应用之间的关系&#xff09;而无法和任务的整体结构同时实现。如…...

编程日记 2023/10/2 17:03:19

1558. 得到目标数组的最少函数调用次数

1558. 得到目标数组的最少函数调用次数 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 1558. 得到目标数组的最少函数调用次数 https://leetcode.cn/problems/minimum-numbers-of-function-calls-to-make-target…...

编程日记 2023/10/2 17:02:18

子域名扫描, 后台扫描

子域名和后台扫描 一, 子域名扫描 在渗透测试的早期阶段&#xff0c;子域名扫描是一个非常重要的步骤&#xff0c;它有助于识别目标组织的网络结构和在线资源。 子域名扫描应该在获得适当的权限和授权的情况下进行&#xff0c;以确保所有活动都是合法和合规的。 1. 原因与目…...

编程日记 2023/10/2 16:58:16

毛玻璃带有光影效果的卡片

效果展示 页面结构组成 从效果展示可以看到&#xff0c;页面的主要元素是卡片&#xff0c;卡片的内容呈现上都是比较常规的布局&#xff0c;只是卡片上带有光影效果。 CSS / JavaScript 知识点 transformVanillaTilt.js 使用 页面基础结构实现 <div class"contain…...

编程日记 2023/10/2 16:57:15

【Java】面向过程和面向对象思想||对象和类

1.面向过程和面向对象思想 两者都贯穿于软件分析、设计和开发的各个阶段&#xff0c;对应面向对象就分别称为面向对象的分析&#xff08;OOA&#xff09;、面向对象的设计&#xff08;OOD&#xff09;和面向对象的编程&#xff08;OOP&#xff09;。C语言是一种典型的面向过程语…...

编程日记 2023/10/2 16:55:13

孤举者难起，众行者易趋，openGauss 5.1.0版本正式发布！

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…...

编程日记 2023/10/2 16:54:12

软考——软件设计师中级2023年11月备考（1.计算机组成原理）

一、计算机组成原理 1.数据的表示 1.1 十进制转R进制 方法&#xff1a;对十进制数除R取余&#xff0c;最后对余数取倒序 如&#xff1a; 1.2 原码反码补码 1.3 浮点数 1.4 校验码 —— 海明码 &#xff08;非重点&#xff0c;了解即可&#xff09; 海明码的构成方法&…...

编程日记 2023/10/2 16:53:11

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（四）

思维导图 一、日期对象 1.1 实例化 实例化&#xff0c;默认得到当前时间&#xff0c;也可以指定时间 1.2 日期对象方法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible&q…...

编程日记 2023/10/2 16:52:10

【前端】HTML5 Audio 预加载 按照队列顺序播放音频, 可以陆续往队列中加内容

【前端】Audio 按照队列顺序播放音频, 可以陆续往队列中加内容 var 音频库 {} var 当前音频集合 [] /*** 将文本添加到队列中* 持续去播放* 播放过的音频会自动从队列中删除* * 已规划* 要保障同时进行加载的数据不能超过5个(线程池 5)* * param 文本*/播放音频队列(文本){i…...

编程日记 2023/10/2 16:50:07

【单片机】13-实时时钟DS1302

1.RTC的简介 1.什么是实时时钟&#xff08;RTC&#xff09; &#xff08;rtc for real time clock) &#xff08;1&#xff09;时间点和时间段的概念区分 &#xff08;2&#xff09;单片机为什么需要时间点【一定的时间点干什么事情】 &#xff08;3&#xff09;RTC如何存在于…...

编程日记 2023/10/2 16:47:05

springboot和vue：十三、VueX简介与安装与推荐视频+前端数据模拟MockJS

VueX简介与安装与推荐视频 VueX用于管理分散在vue各个组件中的数据。每一个VueX的核心都是一个store&#xff0c;当store中的状态发生变化时&#xff0c;与之绑定的视图也将重新渲染。store中的状态不允许被直接修改&#xff0c;只能显示提交mutationVueX中有五个重要的概念&a…...

编程日记 2023/10/2 16:45:03

[React] Zustand状态管理库

文章目录 1.Zustand介绍2.创建一个store3.使用方法3.1 获取状态3.2 更新状态3.3 访问存储状态3.4 处理异步数据3.5 在状态中访问和存储数组3.6 持续状态 4.总结 1.Zustand介绍 状态管理一直是现代程序应用中的重要组成部分, Zustand使用 hooks 来管理状态无需样板代码。 更少…...

编程日记 2023/10/2 16:44:02

【ChatGPT】ChatGPT发展历史

更多优质文章请看底部&#xff1a;ChatGPT与日本首相交流核废水事件-精准Prompt... hello&#xff0c;我是小索奇&#xff0c;在AI日益庞大的环境下&#xff0c;接下来将为大家不断的ChatGPT学习 ChatGPT使用了 Transformer 结构&#xff0c;建立在 OpenAI的 GPT-3.5 大型语言模…...

编程日记 2023/10/2 16:43:01

分布式文件存储系统Minio实战

分布式文件系统应用场景 互联网海量非结构化数据的存储需求电商网站&#xff1a;海量商品图片视频网站&#xff1a;海量视频文件网盘 : 海量文件社交网站&#xff1a;海量图片 1. Minio介绍 MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存…...

编程日记 2023/10/2 16:42:00

【MySQL】MySQL 官方安装包形式

MySQL 官方提供3种包&#xff1a; 1. 源码包 mysql-5.7.42.tar.gz mysql-5.7.42-aarch64.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.34.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.42.tar.gz需要用户根据自己的CPU架构选择对应的…...

编程日记 2023/10/2 16:41:00

使用sqlmap获取数据步骤

文章目录 1.使用sqlmap获取所有数据库2.使用sqlmap获取当前连接数据库3.使用sqlmap获取当前数据库下所有表名4.使用sqlmap获取当前数据库下某个表下所有列名5.使用sqlmap获取当前数据库下某个表下指定字段的数据6.测试当前用户是否是管理员7.使用burpsqlmap批量检测8.脱库命令9…...

编程日记 2023/10/2 16:39:58

[论文笔记]GLM

引言 今天带来论文GLM: General Language Model Pretraining with Autoregressive Blank Infilling的笔记。论文中文标题为 通用语言模型预训练与自回归填空。 有很多不同类型的预训练架构，包括自编码模型(BERT、RoBERTa、ALBERT)、自回归模型(GPT系列)以及编码器-解码器模型…...

编程日记 2023/10/2 16:37:57

漏洞扫描环境：win10系统用VMware Workstation打开虚拟机若干问题

win10系统用VMware Workstation打开虚拟机若干问题 一 .VMware打开虚拟机就蓝屏重启怎么解决&#xff1f;一. VMware打开虚拟机就蓝屏重启怎么解决&#xff1f;方法一&#xff1a;1、同时按下CTRLSHIFTESC打开任务管理器功能&#xff0c;之后依次点击-详细信息-性能后出现下列界…...

编程日记 2023/10/2 16:35:54

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/1/26 21:03:35

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02