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

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

在这里插入图片描述

文章目录

  • 概念
  • 媒体查询
    • 媒体类型
    • 媒体特性
    • 媒体运算符

在这里插入图片描述

概念

所谓对响应式布局方案的理解,众说纷纭,核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同

  • 社区中有很多人分享,并列出了多种实现响应式布局的方案,比如【 rem百分比%vw,vh】 ,以及最关键的 【媒体查询】等等。其实针对这些布局方案的理解,绝大多数人还是存在一定的误区。从我个人严格意义上的理解中,上述的方案 只有 媒体查询 才是真正的响应式布局 ,而其他几种方案比如【 rem百分比%vwvh】,准确点说,应该是属于 自适应布局的概念范围内自适应布局 和响应式布局其实在本质上还是有区别的。简述的说就是 响应式布局 真正意义上做到了 一套代码资源在不同尺度屏幕下的布局呈现方式的不同, 而自适应布局,会根据用户使用的设备屏幕尺寸不同,呈现出不同方式的展示效果,主要是控制页面显示的比例,并不会在同一套代码中去动态切换布局方式。同时这需要开发人员 提前针对不同平台开发出多套同业务但不同布局的代码,然后动态判断用户的使用设备环境,从而决定呈现相应的页面。

讲述了 响应式布局 的概念理解,那么接下来,就来聊聊 响应式布局的最佳解决方案 【媒体查询

媒体查询

媒体类型

类型描述
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新特性 响应式布局

文章目录 概念媒体查询媒体类型媒体特性媒体运算符 概念 所谓对响应式布局方案的理解&#xff0c;众说纷纭&#xff0c;核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享&#xff0c;并列出了多种实现响应式布局的方案&#xff0c;比如【 rem&…...

【Java 进阶篇】JQuery 遍历:发现元素的魔法之旅

欢迎来到 JQuery 的奇妙世界&#xff0c;一个充满活力和灵感的地方。在这个世界里&#xff0c;我们将一起探讨 JQuery 的遍历功能&#xff0c;这是一个让你轻松发现和操作网页元素的神奇工具。无需太多前端经验&#xff0c;只要有一颗探险的心&#xff0c;你就能在 JQuery 遍历…...

合肥数字孪生赋能工业制造,加速推进制造业数字化转型

聚焦国家战略需求和先进制造业发展方向&#xff0c;加快数字化发展战略部署&#xff0c;数字孪生、工业互联网、工业物联网已被广泛认为是工业革命的新引擎。合肥数字孪生正在推动工业制造从制造转向智造。通过数字化建模和仿真的方式&#xff0c;优化设计、生产、质量管理、供…...

Linux发展史与环境安装

Linux发展史与环境安装 一、Linux发展史推动技术进步的基本模式理解操作系统的发展理解Linux操作系统的发展 一、Linux的环境安装 一、Linux发展史 Linux和window XX其实都是一样的&#xff0c;定位&#xff1a;操作系统&#xff0c;企业内部&#xff0c;要给用户提供“互联网…...

【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

uniapp 顶部导航和弹窗被video遮挡解决办法 第一步&#xff1a;配置 subNVues {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom","app-…...

opencv(1):创建和显示窗口, 读取保存图片

下载源码&#xff0c;方便查看 API 信息。 快速在源码文件夹中搜索相关 api. grep“namedWindow(*-Rn// 限定 .h 文件 grep“namedWindow(*-Rn|grep "\.h" vscode 语法检测有问题 一直有波浪线 打开 vscode, setting 界面&#xff0c;搜索 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 转换算子(上)】

前言 这节注定是一个大的章节&#xff0c;我预估一下得两三天&#xff0c;涉及到的一些东西不懂就重新学&#xff0c;比如 Lambda 表达式&#xff0c;我只知道 Scala 中很方便&#xff0c;但在 Java 中有点发怵了&#xff1b;一个接口能不能 new 来构造对象? 答案是可以的&…...

【vitis】 AIE basic

AIE vs AIE-ML versal 期间分类 文件 操作 vitis -new -w . 安装...

微信抽奖活动怎么做

微信抽奖活动&#xff1a;打破传统&#xff0c;创新互动&#xff0c;带给你超乎想象的惊喜体验&#xff01; 随着互联网的飞速发展&#xff0c;人们越来越热衷于参与各种线上活动。而微信&#xff0c;作为中国最大的社交平台之一&#xff0c;自然成为了各种活动的聚集地。今天…...

装机必备!这5款免费软件,你值得拥有!

​ 目前win7渐渐退出视野&#xff0c;大部分人都开始使用win10了&#xff0c;笔者在日常的工作和使用中&#xff0c;为了能够让效率的大提升&#xff0c;下载了不少软件&#xff0c;以下的软件都是个人认为装机必备&#xff0c;而且都是可以免费下载。 1.屏幕亮度调节——Twin…...

华为eNSP综合实验考试

VLAN信息表 设备名称 端口 链路类型 VLAN 参数 HZ-HZCampus-Agg01-S5731 GE0/0/1 Trunk PVID:1 Allow-pass&#xff1a;10 20 Eth-trunk1&#xff08;GE0/0/2,0/0/3,0/0/23&#xff09; Trunk PVID:1 Allow-pass&#xff1a;10 20 GE0/0/24 Access PVID&#xf…...

OPPO Watch纯手机开启远程ADB调试

Wear OS手表中&#xff0c;我们可以直接在开发者设置中打开WiFi调试。但是这在OPPO等魔改Android系统中不再奏效。 需要什么&#xff1f;&#xff1f; 手表一台手机一个OTG转接头一个手表充电器一个 演示设备 手机&#xff1a; OPPO Find X手表&#xff1a; OPPO Watch 1代 …...

idea查看UML类图

idea查看UML类图 一、如何查看UML类图 1.1 选择需要查看的类或者包&#xff0c;鼠标右键&#xff0c;选择Diagrams->Show Diagram 1.2 对于UML类图中的包&#xff0c;选中后点击鼠标右键-> Expand Nodes(展开节点) 展开前 展开后 1.3 展开后分布比较凌乱&#xff…...

2736. 最大和查询 : 从一维限制到二维限制,逐步思考剖析本题(进阶一问)

题目描述 这是 LeetCode 上的 「2736. 最大和查询」 &#xff0c;难度为 「困难」。 Tag : 「排序」、「离散化」、「树状数组」 给你两个长度为 n、下标从 0 开始的整数数组 nums1 和 nums2&#xff0c;另给你一个下标从 1 开始的二维数组 queries&#xff0c;其中 。 对于第…...

2023数维杯国际数学建模A题B题C题D题思路+模型+代码+完整论文

目录 1.数维杯各题思路模型&#xff1a;比赛开始后&#xff0c;第一时间更新&#xff0c;获取见文末名片 3 常见数模问题常见模型分类 3.1 分类问题 3.2 优化问题 详细思路见此名片&#xff0c;开赛第一时间更新 1.数维杯各题思路模型&#xff1a;9.7晚上比赛开始后&#x…...

java多个jar包编译生成.class文件

有时候需要通过多个jar包让java文件生成 .class字节码文件&#xff0c;这里主要记录一下格式问题 javac -cp a.jar;b.jar a.java...

小米手环8pro重新和手机配对解决办法

如果更换了手机&#xff0c;那么小米手环8pro是无法和新手机自动连接的。 但是在新手机上直接连接又连接不上&#xff0c;搜索蓝牙根本找不到手环的蓝牙。 解决办法就是&#xff1a; 把手环恢复出厂&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 是的&…...

element-china-area-data插件vue3做省市区的下拉选择,用3个独立的el-select实现

第1版&#xff0c;选择下拉没有优化 第2版&#xff0c;选择下拉时&#xff0c;做了优化...

盘点十大免费低/无代码开发软件,数字化转型看这里

在数字化日益普及的当下&#xff0c;低代码开发技术逐渐受到大众的追捧。这种技术让缺乏编程经验的大众也能轻松创建应用程序和网站。通过直观的图形界面和拖拽功能&#xff0c;用户可以无需编写任何代码&#xff0c;轻松实现自己的开发需求。本文将为您介绍十大免费的低代码开…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...