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

响应式设计的实现方式

news 2025/9/14 22:32:24

一. 什么是响应式

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

响应式网站常见特点：

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	设置弹性盒子的缩小比率
flex	flex-grow，flex-shrink，flex-basis的缩写

特殊写法

属性	作用
flex:auto	flex: 1 1 auto
flex: none	flex: 0 0 auto
flex: 0% flex:100px	flex: 1 1 0% flex: 1 1 100px
flex:1	flex: 1 1 0%

响应式设计的实现方式

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

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

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

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

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

TempleteMethod

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

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

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

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

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

子域名扫描, 后台扫描

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

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

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

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

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

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

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

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

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

📢📢📢📣📣📣 哈喽！大家好，我是【IT邦德】，江湖人称jeames007，10余年DBA及大数据工作经验一位上进心十足的【大数据领域博主】！😜&am…...

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

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

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

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

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

思维导图一、日期对象 1.1 实例化实例化，默认得到当前时间，也可以指定时间 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.什么是实时时钟（RTC） （rtc for real time clock) （1）时间点和时间段的概念区分 （2）单片机为什么需要时间点【一定的时间点干什么事情】 （3）RTC如何存在于…...

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

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

VueX简介与安装与推荐视频 VueX用于管理分散在vue各个组件中的数据。每一个VueX的核心都是一个store，当store中的状态发生变化时，与之绑定的视图也将重新渲染。store中的状态不允许被直接修改，只能显示提交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发展历史

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

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

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

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

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

【MySQL】MySQL 官方安装包形式

MySQL 官方提供3种包： 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打开虚拟机就蓝屏重启怎么解决？一. VMware打开虚拟机就蓝屏重启怎么解决？方法一：1、同时按下CTRLSHIFTESC打开任务管理器功能，之后依次点击-详细信息-性能后出现下列界…...

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2025/9/14 10:31:30

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/9/13 17:44:49

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...

编程新知 2025/9/10 1:16:45

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2025/9/11 8:42:09

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2025/9/14 12:35:14

Android15默认授权浮窗权限

我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/8/27 15:36:00

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/9/6 3:33:57