【前段基础入门之】=>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版,选择下拉时,做了优化...
盘点十大免费低/无代码开发软件,数字化转型看这里
在数字化日益普及的当下,低代码开发技术逐渐受到大众的追捧。这种技术让缺乏编程经验的大众也能轻松创建应用程序和网站。通过直观的图形界面和拖拽功能,用户可以无需编写任何代码,轻松实现自己的开发需求。本文将为您介绍十大免费的低代码开…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门  获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
