拿来即用的响应式布局方法

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 HTML 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

响应式设计是一种能够使网站在不同设备和屏幕尺寸下都能够良好展示的设计方法。HTML5 提供了一些特性和技术来支持响应式设计。这在实际的开发过程中是必不可少的。

以下是响应式设计的一些用法和实现方式:

1.Viewport 设置:Viewport 是用户在浏览器中看到网页的区域,可以通过以下方式设置 Viewport 标签来适应不同设备的屏幕大小。Viewport 设置通过 meta> 标签来实现,通常放在页面的 head> 部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width:将视口宽度设置为设备宽度。initial-scale=1.0:设置初始缩放比例为 1。

2.CSS 媒体查询:使用 CSS 媒体查询可以根据设备的特性(如屏幕宽度、高度、方向等)来应用不同的样式。通过媒体查询,可以为不同屏幕尺寸编写特定的 CSS 规则。

//小屏幕设备(移动设备):
/* 当屏幕宽度小于等于 768px 时应用的样式 */
@media (max-width: 768px) {/* 添加响应式样式 */
}//中等屏幕设备(平板电脑)
/* 当屏幕宽度大于 576px 且小于等于 992px 时应用的样式 */
@media  (min-width:577px) and (max-width:992px) {/* 添加样式 */
}//大屏幕设备(桌面电脑):
/* 当屏幕宽度大于 992px 且小于等于 1200px 时应用的样式 */
@media (min-width:993px) and (max-width:1200px) {/* 添加样式 */
}//超大屏幕设备(大屏幕显示器):
/* 当屏幕宽度大于 1200px 时应用的样式 */
@media (min-width:1201px) {/* 添加样式 */
}

3.弹性网格布局:使用 CSS 弹性盒子(Flexbox)布局可以使你更轻松地创建响应式布局,使内容在不同屏幕上自动调整位置和大小。

.container {display: flex;flex-wrap: wrap;
}.item {flex: 1;/* 其他样式 */

4.流式布局:使用百分比宽度来定义元素的宽度,使其随着窗口大小的改变而自动调整。

.box {width: 50%;/* 其他样式 */
}

5.图片响应式:使用 max-width: 100% 样式使图片根据其容器大小自动调整。

img {max-width: 100%;height: auto;
}

6.CSS Grid 布局:使用 CSS Grid 布局可以更高效地创建复杂的响应式布局,分隔内容区域。

.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

7.移动优先设计:使用媒体查询时,从移动设备的样式开始编写,然后逐渐添加更大屏幕的样式。这有助于确保你的网站在移动设备上具有良好的用户体验。

响应式设计是一种灵活的方法,可以根据不同的项目需求进行调整和实现。通过设置 Viewport、使用媒体查询、弹性布局和其他技术,你可以为不同设备和屏幕尺寸创建出色的用户体验。

响应式设计在前端是一个很重要的内容,每一个前端开发都要了解并会使用,在实际的开发中,移动端的响应式常采用 flexible.js + rem 的方式,原理是根据不同的视口宽度给网页中的 html 根节点设置不同的 font-size。多端尺寸兼容采用媒体查询的方式。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4675.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OceanBase诊断调优】—— 如何查看 Root Service 切换完成的时间点

本文详述如何查看 Root Service 切换完成的时间点。 在主 Root Service 节点上的 rootservice.log 搜索。 grep -i "START_SERVICE: full_service !!! start to work!!" rootservice.log[2023-12-08 14:35:58.927245] INFO [RS] ob_root_service.cpp:7111 [27152]…

ax200/ax201/ax210/ax211/ax411等intel网卡无法开启5G热点问题解决方案汇总

目录 故障原因解决方案windowslinuxkernel < 5.5kernel > 5.5方案1 修改linux内核模块代码&#xff08;iwlwifi内核模块&#xff09;&#xff0c;重新编译内核模块并重新导入方案2 修改hostapd代码 最后更新于2024.04.28 故障原因 根本原因是因为英特尔在内核中开启了LA…

算法模板——数据结构篇

声明&#xff1a;参考自acwing 目录 1.单链表 2.双链表 3.数组栈与队列 4.单调栈 1.单链表 int head,e[N],ne[N],idx;void init(){head-1;idx0; } void add_head(int x){ //head有实值e[idx]x,ne[idx]head,headidx; } void add(int k,int x){ e[idx]x,…

Python Flask Web教程:make_response的详细用法

在 Flask 中,make_response 是一个非常实用的函数,它可以用来构造响应对象。下面是 make_response 函数的详细用法: 基本用法 在 Flask 中,make_response 可以用来从返回的数据中创建一个响应对象。它接受几种不同类型的参数,并返回一个 Response 对象。 from flask im…

【CANoe示例分析】TCP Chat(CAPL) with TLS encription

1、工程路径 C:\Users\Public\Documents\Vector\CANoe\Sample Configurations 15.3.89\Ethernet\Simulation\TLSSimChat 在CANoe软件上也可以打开此工程:File|Help|Sample Configurations|Ethernet - Simulation of Ethernet ECUs|Basic AUTOSAR Adaptive(SOA) 2、示例目…

面试题:斐波那契数列

题目描述&#xff1a; 写一个函数,输入n,求斐波那契数列的第n项.斐波那契数列定义如下: F(0) 0 F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 解题方法&#xff1a; 算法1: 利用递归实现,这个方法效率有严重问题,时间复杂度为O(2^n) long long Fibon(int n) {if (…

微软如何打造数字零售力航母系列科普03 - Mendix是谁?作为致力于企业低代码服务平台的领头羊,它解决了哪些问题?

一、Mendix 成立的背景 Mendix的成立是为了解决软件开发中最大的问题&#xff1a;业务和IT之间的脱节。这一挑战在各个行业和地区都很普遍&#xff0c;很简单&#xff1a;业务需求通常被描述为IT无法正确解释并转化为软件。业务和IT之间缺乏协作的原因是传统的代码将开发过程限…

2024-4-28

今日流水账&#xff1a; 上午&#xff1a; 打CTF总不能爆零吧&#xff0c;所以看群里师傅说 D3CTF 的那道 qemu 逃逸很简单&#xff0c;所以就把他给做了然后还是在配内核环境&#xff0c;服了&#xff0c;还是不行捏~~~下午继续配&#xff0c;啊啊啊 好好的思考了一下&#xf…

WPF —— MVVM 指令执行不同的任务实例

标签页 设置两个按钮&#xff0c; <Button Content"修改状态" Width"100" Height"40" Background"red"Click"Button_Click"></Button><Button Content"测试"Width"100"Height"40&…

如何让用户听话?

​福格教授&#xff08;斯坦福大学行为设计实验室创始人&#xff09;通过深入研究人类行为20年&#xff0c;2007年用自己的名子命名&#xff0c;提出了一个行为模型&#xff1a;福格行为模型。 模型表明&#xff1a;人的行为发生&#xff0c;要有做出行为的动机和完成行为的能…

web安全---xss漏洞/beef-xss基本使用

what xss漏洞----跨站脚本攻击&#xff08;Cross Site Scripting&#xff09;&#xff0c;攻击者在网页中注入恶意脚本代码&#xff0c;使受害者在浏览器中运行该脚本&#xff0c;从而达到攻击目的。 分类 反射型---最常见&#xff0c;最广泛 用户将带有恶意代码的url打开&a…

Python常见的第三方库[详细解析]

Python是通过模块来体现库&#xff0c;常见的有标准库和第三方库。标准库是Python自带的库&#xff0c;在官方文档中可以查看&#xff0c;第三方库是其他大佬做出来的。 库它的优点有:1.降低程序员的学习成本 2.提高程序的开发效率 。 第1个常见的库为datetime&#xff0c;我们…

二叉树理论和题目

二叉树的种类 在我们解题过程中二叉树有两种主要的形&#xff1a;满二叉树和完全二叉树。 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的结点和度为 2 的结点&#xff0c;并且度为 0 的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。 这棵二叉树为满二叉树…

机器学习Sklean基础教程

Scikit-learn&#xff08;也称为 sklearn&#xff09;是一个使用 python 语言的机器学习模块&#xff0c;内置了大量的监督和无监督学习算法&#xff0c;主要用于数据挖掘和数据分析。 以下是一个简单关于如何使用 sklearn 进行机器学习的指导&#xff1a; 安装: 首先&#…

如何使用SOCKS5代理?

SOCKS5 是一个代理协议&#xff0c;在使用TCP/IP协议通讯的前端机器和服务器机器之间扮演一个中介角色&#xff0c;使得内部网中的前端机器变得能够访问Internet网中的服务器&#xff0c;或者使通讯更加安全。那么&#xff0c;SOCKS5代理该如何使用呢&#xff1f; 首先需要获取…

Matlab实现CNN-LSTM模型,对一维时序信号进行分类

1、利用Matlab2021b训练CNN-LSTM模型&#xff0c;对采集的一维时序信号进行分类二分类或多分类 2、CNN-LSTM时序信号多分类执行结果截图 训练进度&#xff1a; 网络分析&#xff1a; 指标变化趋势&#xff1a; 代码下载方式&#xff08;代码含数据集与模型构建&#xff0c;附…

【Docker】常见命令汇总

1 镜像相关 1.1 查看镜像 # 查看镜像列表 docker images# 查看具体的镜像: sudo docker images <镜像名称> docker images centos # 指定具体 tag: sudo docker images centos:<tag> docker images centos:7.8.2003# 查看镜像 ID 列表: --q/--quiet docker ima…

BERT一个蛋白质-季军-英特尔创新大师杯冷冻电镜蛋白质结构建模大赛-paipai

关联比赛: “创新大师杯”冷冻电镜蛋白质结构建模大赛 解决方案 团队介绍 paipai队、取自 PAIN AI&#xff0c;核心成员如我本人IvanaXu(IvanaXu GitHub)&#xff0c;从事于金融科技业&#xff0c;面向银行信用贷款的风控、运营场景。但我们团队先后打过很多比赛&#xf…

社交媒体数据恢复:Rocket Chat

Rocket.Chat 数据恢复方法 1. 数据备份 在探讨数据恢复方法之前&#xff0c;重要的是要了解Rocket.Chat有一个自动备份功能。这个备份功能可以将你的数据定期备份到/var/snap/rocketchat-server//backup.tgz1 。如果你的Rocket.Chat服务器已经启用了这个自动备份功能&#xf…

如何最大程度使用AWS?

随着云计算技术的不断发展&#xff0c;AWS已经成为众多企业的首选&#xff0c;为其提供了强大的基础设施和服务。那么如何最大程度地、灵活地利用AWS&#xff0c;成为许多企业专注的焦点。九河云作为AWS的合作伙伴&#xff0c;为读者们提供一些技巧和策略&#xff0c;帮助读者充…