【前段基础入门之】=>CSS3新特性 响应式布局

文章目录
- 概念
- 媒体查询
- 媒体类型
- 媒体特性
- 媒体运算符

概念
所谓对
响应式布局方案的理解,众说纷纭,核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同
- 社区中有很多人分享,并列出了
多种实现响应式布局的方案,比如【rem,百分比%,vw,vh】 ,以及最关键的 【媒体查询】等等。其实针对这些布局方案的理解,绝大多数人还是存在一定的误区。从我个人严格意义上的理解中,上述的方案 只有媒体查询才是真正的响应式布局,而其他几种方案比如【rem,百分比%,vw,vh】,准确点说,应该是属于自适应布局的概念范围内;自适应布局 和响应式布局其实在本质上还是有区别的。简述的说就是响应式布局真正意义上做到了一套代码资源在不同尺度屏幕下的布局呈现方式的不同, 而自适应布局,会根据用户使用的设备屏幕尺寸不同,呈现出不同方式的展示效果,主要是控制页面显示的比例,并不会在同一套代码中去动态切换布局方式。同时这需要开发人员 提前针对不同平台开发出多套同业务但不同布局的代码,然后动态判断用户的使用设备环境,从而决定呈现相应的页面。
讲述了
响应式布局的概念理解,那么接下来,就来聊聊 响应式布局的最佳解决方案 【媒体查询】
媒体查询
媒体类型
| 类型 | 描述 |
|---|---|
all | 检测所有设备。 |
screen | 检测电子屏幕,包括:电脑屏幕、平板屏幕、手机屏幕等。【最常用】 |
print | 检测打印机 |
媒体特性
| 类型 | 描述 |
|---|---|
width | 检测视口宽度 |
max-width | 检测视口最大宽度 |
min-width | 检测视口最小宽度 |
height | 检测视口高度 |
max-height | 检测视口最大高度 |
min-height | 检测视口最小高度 |
device-width | 检测设备屏幕的宽度 |
max-device-width | 检测设备屏幕的最大宽度 |
min-device-width | 检测设备屏幕的最小宽度 |
orientation | 检测视口的旋转方向(是否横屏)portrait :视口处于纵向,即高度大于等于宽度landscape :视口处于横向,即宽度大于高度 |
媒体运算符
| 类型 | 含义 |
|---|---|
and | 并且 |
, 或 or | 或 |
not | 否定 |
only | 肯定 |
实际开发中,将会对不同尺寸屏幕做一个划分

使用代码示例
@media screen and (max-width:768px) {
/*CSS-Code;*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
/*CSS-Code;*/
}
由于涉及到多套样式相互切换,如果写在一起,就会特别的冗余,所以,做响应式布局,我们一般 使用媒体查询搭配外部样式表一起使用。
例如:
<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">
🚵♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————
相关文章:
【前段基础入门之】=>CSS3新特性 响应式布局
文章目录 概念媒体查询媒体类型媒体特性媒体运算符 概念 所谓对响应式布局方案的理解,众说纷纭,核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享,并列出了多种实现响应式布局的方案,比如【 rem&…...
【Java 进阶篇】JQuery 遍历:发现元素的魔法之旅
欢迎来到 JQuery 的奇妙世界,一个充满活力和灵感的地方。在这个世界里,我们将一起探讨 JQuery 的遍历功能,这是一个让你轻松发现和操作网页元素的神奇工具。无需太多前端经验,只要有一颗探险的心,你就能在 JQuery 遍历…...
合肥数字孪生赋能工业制造,加速推进制造业数字化转型
聚焦国家战略需求和先进制造业发展方向,加快数字化发展战略部署,数字孪生、工业互联网、工业物联网已被广泛认为是工业革命的新引擎。合肥数字孪生正在推动工业制造从制造转向智造。通过数字化建模和仿真的方式,优化设计、生产、质量管理、供…...
Linux发展史与环境安装
Linux发展史与环境安装 一、Linux发展史推动技术进步的基本模式理解操作系统的发展理解Linux操作系统的发展 一、Linux的环境安装 一、Linux发展史 Linux和window XX其实都是一样的,定位:操作系统,企业内部,要给用户提供“互联网…...
【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖
uniapp 顶部导航和弹窗被video遮挡解决办法 第一步:配置 subNVues {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom","app-…...
opencv(1):创建和显示窗口, 读取保存图片
下载源码,方便查看 API 信息。 快速在源码文件夹中搜索相关 api. grep“namedWindow(*-Rn// 限定 .h 文件 grep“namedWindow(*-Rn|grep "\.h" vscode 语法检测有问题 一直有波浪线 打开 vscode, setting 界面,搜索 python 在 setting.json…...
LeetCode530. Minimum Absolute Difference in BST
文章目录 一、题目二、题解 一、题目 Given the root of a Binary Search Tree (BST), return the minimum absolute difference between the values of any two different nodes in the tree. Example 1: Input: root [4,2,6,1,3] Output: 1 Example 2: Input: root [1,…...
Flink(五)【DataStream 转换算子(上)】
前言 这节注定是一个大的章节,我预估一下得两三天,涉及到的一些东西不懂就重新学,比如 Lambda 表达式,我只知道 Scala 中很方便,但在 Java 中有点发怵了;一个接口能不能 new 来构造对象? 答案是可以的&…...
【vitis】 AIE basic
AIE vs AIE-ML versal 期间分类 文件 操作 vitis -new -w . 安装...
微信抽奖活动怎么做
微信抽奖活动:打破传统,创新互动,带给你超乎想象的惊喜体验! 随着互联网的飞速发展,人们越来越热衷于参与各种线上活动。而微信,作为中国最大的社交平台之一,自然成为了各种活动的聚集地。今天…...
装机必备!这5款免费软件,你值得拥有!
目前win7渐渐退出视野,大部分人都开始使用win10了,笔者在日常的工作和使用中,为了能够让效率的大提升,下载了不少软件,以下的软件都是个人认为装机必备,而且都是可以免费下载。 1.屏幕亮度调节——Twin…...
华为eNSP综合实验考试
VLAN信息表 设备名称 端口 链路类型 VLAN 参数 HZ-HZCampus-Agg01-S5731 GE0/0/1 Trunk PVID:1 Allow-pass:10 20 Eth-trunk1(GE0/0/2,0/0/3,0/0/23) Trunk PVID:1 Allow-pass:10 20 GE0/0/24 Access PVID…...
OPPO Watch纯手机开启远程ADB调试
Wear OS手表中,我们可以直接在开发者设置中打开WiFi调试。但是这在OPPO等魔改Android系统中不再奏效。 需要什么?? 手表一台手机一个OTG转接头一个手表充电器一个 演示设备 手机: OPPO Find X手表: OPPO Watch 1代 …...
idea查看UML类图
idea查看UML类图 一、如何查看UML类图 1.1 选择需要查看的类或者包,鼠标右键,选择Diagrams->Show Diagram 1.2 对于UML类图中的包,选中后点击鼠标右键-> Expand Nodes(展开节点) 展开前 展开后 1.3 展开后分布比较凌乱ÿ…...
2736. 最大和查询 : 从一维限制到二维限制,逐步思考剖析本题(进阶一问)
题目描述 这是 LeetCode 上的 「2736. 最大和查询」 ,难度为 「困难」。 Tag : 「排序」、「离散化」、「树状数组」 给你两个长度为 n、下标从 0 开始的整数数组 nums1 和 nums2,另给你一个下标从 1 开始的二维数组 queries,其中 。 对于第…...
2023数维杯国际数学建模A题B题C题D题思路+模型+代码+完整论文
目录 1.数维杯各题思路模型:比赛开始后,第一时间更新,获取见文末名片 3 常见数模问题常见模型分类 3.1 分类问题 3.2 优化问题 详细思路见此名片,开赛第一时间更新 1.数维杯各题思路模型:9.7晚上比赛开始后&#x…...
java多个jar包编译生成.class文件
有时候需要通过多个jar包让java文件生成 .class字节码文件,这里主要记录一下格式问题 javac -cp a.jar;b.jar a.java...
小米手环8pro重新和手机配对解决办法
如果更换了手机,那么小米手环8pro是无法和新手机自动连接的。 但是在新手机上直接连接又连接不上,搜索蓝牙根本找不到手环的蓝牙。 解决办法就是: 把手环恢复出厂!!!!! 是的&…...
element-china-area-data插件vue3做省市区的下拉选择,用3个独立的el-select实现
第1版,选择下拉没有优化 第2版,选择下拉时,做了优化...
盘点十大免费低/无代码开发软件,数字化转型看这里
在数字化日益普及的当下,低代码开发技术逐渐受到大众的追捧。这种技术让缺乏编程经验的大众也能轻松创建应用程序和网站。通过直观的图形界面和拖拽功能,用户可以无需编写任何代码,轻松实现自己的开发需求。本文将为您介绍十大免费的低代码开…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
