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

响应式设计的实现方式

news 2025/10/31 19:10:09

一. 什么是响应式

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

响应式网站常见特点：

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

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/10/27 5:41:00

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/10/23 21:21:11

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/10/25 0:21:11

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/10/25 12:24:05

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/10/29 9:16:42

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/10/3 0:17:23

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2025/10/27 8:09:08

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

编程新知 2025/10/29 5:46:51

如何通过git命令查看项目连接的仓库地址？

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

编程新知 2025/8/11 20:43:04