only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字， 移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。...max-color-index 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。...max-resolution 定义设备的最大分辨率。 max-width 定义输出设备中的页面最大可见区域宽度。 min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。...min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。...min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。 min-device-width 定义输出设备的屏幕最小可见宽度。
，容易出现长宽度与设计稿不一致，另外，background-position 参照于背景图片的像素， IE怪异模式对盒模型的解析不同等也是会影响参照值； 垂直方向的适配问题 ！！！...弹性布局原理 弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。...采用flex布局的元素，被称为容器，它的所有子元素会自动成为容器成员，称为flex项目 弹性布局优点 纯粹的 CSS+HTML 解决方案，父元素 display:flex，子元素配合设置布局，排列方向，...会导致：缩放到低于1px的元素时隐时现（解决办法：指定最小转换像素，对于比较小的像素，不转换为 rem 或 vw） 两个同样宽度的元素因为各自周围的元素宽度不同，导致两元素相差1px。...= 9.256926vw 可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。
这些浏览器会忽略用 rem 设定的字体大小，比如：p { font-size: 14px; font-size: .875rem;}Flex 布局（弹性盒子布局）Flex 布局（弹性盒子布局...媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...媒体查询与弹性和布局的使用情况：媒体查询：当页面的结构发生变化的话最好使用媒体查询。弹性盒子：如果只是宽高的变化，尽量使用弹性盒。...max min 前缀）media queries 4 中弃用orientationportrait 竖屏/landscape 横屏max-width 最大宽度：是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时...所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略。
zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。...属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems默认配置。...width 应用页面显示区域的宽度。 min-width 应用页面显示区域的最小宽度。 max-width 应用页面显示区域的最大宽度。...min-resolution 设备的最小分辨率。 max-resolution 设备的最大分辨率。 orientation 屏幕的方向。...min-device-height 设备的最小高度。 max-device-height 设备的最大高度。 device-width 设备的宽度。 min-device-width 设备的最小宽度。
viewport宽度，可以设置device-width特殊值 hinitial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比...布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"（flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 )，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...、not、only) 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件 值 说明 and 可以将多个媒体特性连接到一起，相当于“且”的意思 not 排除某个媒体类型，相当于“非”的意思，...注意他们要加小括号 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 为了防止混乱
常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变...缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。.../* 媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。...由于rem根据不同枚举的屏幕尺寸设置了不同的大小值，所以根据rem布局的元素会根据屏幕自动适配。...缺点：媒体查询不能完全枚举，毕竟android的屏幕尺寸碎片化严重，各种尺寸都有，不能完全覆盖，只能大体覆盖。如果想要精确覆盖要么通过js实现，要么用最新的浏览器已经支持的calc实现。
常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem...缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。.../* 媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。...由于rem根据不同枚举的屏幕尺寸设置了不同的大小值，所以根据rem布局的元素会根据屏幕自动适配。...缺点：媒体查询不能完全枚举，毕竟android的屏幕尺寸碎片化严重，各种尺寸都有，不能完全覆盖，只能大体覆盖。如果想要精确覆盖要么通过js实现，要么用最新的浏览器已经支持的calc实现。
max-device-width 定义输出设备的屏幕最大可见宽度。 min-device-width 定义输出设备的屏幕最小可见宽度。...min-device-height 定义输出设备的屏幕的最小可见高度。 max-height 定义输出设备中的页面最大可见区域高度。 max-width 定义输出设备中的页面最大可见区域宽度。...原因：如果结构如上面示例的那样，并且媒体查询条件由重叠的话，后面的媒体查询样式设置会覆盖前面的媒体查询设置，为了避免发生这种情况，我们就应该遵循一定的规律，使得不同的媒体查询条件下，执行不同的样式，而不会发生冲突...特点： 向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内....向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖 书写建议： 如果是判断最小值 (min-width)，那么范围就应该从小到大写 如果是判断最大值 (max-width)，那么范围就应该从大到小写
媒体查询 通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。 使用link链接 媒体查询合并为一个规则，逗号分隔效果等同于or逻辑操作符。 媒体功能 aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的比率。...color: 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。 color-index: 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0。...max-color-index: 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。...min-color-index: 定义在输出设备的彩色查询表中的最小条目数。 min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。
前言 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...媒体查询与弹性盒布局的适用情况： 媒体查询：当页面的结构发生变化的话最好使用媒体查询。 ...媒体查询书写的基本形式： @media 媒体类型 and （媒体特性）{你的样式} 媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览 媒体类型一般都不用写，直接使用默认值...min前缀） orientation portrait竖屏/landscape横屏 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时...最小宽度min-width “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
1 多媒体查询 1.1 媒体查询 媒体查询能在不同的条件下使用不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。...CSS 的 Media Query 媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。 使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。...speech 用于屏幕阅读器 比如：在屏幕显示与打印设备上不同的 CSS 效果 media 媒体 screen 屏幕 min-width 最小值，视口大于或者等于该值加载这个 css max-width...使用 orientation 属性可以定义设备的方向 值 描述 portrait 竖屏设备即高度大于宽度 landscape 横屏设备即高度小于宽度 最小宽度（>=） max-width 最大宽度（<=） min-height 最小高度（>=） max-height 最大高度（<=） 1.6.2 使用示例 在设备宽度为 568px 时使用样式 @
前言 CSS媒体查询是一种CSS功能，用于根据设备或浏览器的特性应用不同的样式规则。 媒体查询允许您根据屏幕尺寸、设备方向、分辨率和其他属性来调整网页的布局和样式，以实现响应式设计。...min-width 和 max-width：设置设备窗口的最小和最大宽度来选择样式规则。 min-height 和 max-height：设置设备窗口的最小和最大高度来选择样式规则。...常见的媒体查询 以下是一些常见的媒体查询选择： 设备宽度 设备宽度：媒体查询可以根据设备的宽度来选择适当的样式。...通常，您可以使用 min-width 和 max-width 来指定设备的最小和最大宽度。...您可以使用 min-resolution 和 max-resolution 来设置设备的最小和最大分辨率。
@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。...background-color: lightblue; }}宽度大于768px 背景色为绿色宽度大于768px 背景色为蓝色定义和用法@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式...CSS 语法@media +（and | not | only） + 媒体类型 +（and+ 媒体查询）{ CSS-Code;}（and+媒体查询），这个是用来限制查询条件的，例如当屏幕小于最大宽度时...max-width显示区域的最大宽度，例如浏览器窗口。min-aspect-ratio显示区域的宽度和高度之间的最小比例。min-color输出设备每个颜色分量的最小位数。...如果设备并非黑白屏幕，则该值为 0。orientation视窗（viewport）的旋转方向（横屏还是竖屏模式）。overflow-block输出设备如何处理沿块轴溢出视口(viewport)的内容。
{ background-color: lightblue; } } 宽度大于768px 背景色为绿色 宽度大于768px 背景色为蓝色 定义和用法 @media 规则在媒体查询中用于为不同的媒体类型...CSS 语法 @media +（and | not | only） + 媒体类型 +（and+ 媒体查询）{ CSS-Code; } （and+媒体查询），这个是用来限制查询条件的，例如当屏幕小于最大宽度时...max-aspect-ratio 显示区域的宽度和高度之间的最大比例。 max-color 输出设备每个颜色分量的最大位数。 max-color-index 设备可以显示的最大颜色数。...min-aspect-ratio 显示区域的宽度和高度之间的最小比例。 min-color 输出设备每个颜色分量的最小位数。 min-color-index 设备可以显示的最小颜色数。...如果设备并非黑白屏幕，则该值为 0。 orientation 视窗（viewport）的旋转方向（横屏还是竖屏模式）。
,如果想要实现自适应,那就只要修改html的字体大小即可,但是em的话则要修改许许多多的盒子. 02 媒体查询 媒体查询(Media Query)是CSS3的新语法 使用@media查询,可以针对不同的媒体类型定义不同的样式...@media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面....值 解释说明 width 定义输出设备中页面可见的区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 举个例子: 的颜色会怎么变化: 03 媒体查询+rem实现元素动态大小变化 rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式...,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化.
; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...: 使用 Flex 弹性盒模型 或 Grid 网格布局 : 使用这些布局技术可以更轻松地实现复杂的布局结构。...设置最大和最小宽度 : 在设置元素宽度时，需要考虑最小和最大宽度，以确保元素在不同设备上都能够正常显示。...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...可以使用响应式图片，通过设置不同的图片尺寸和分辨率来实现。 使用媒体查询 : 使用媒体查询可以 根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。
Media Queries模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式； Web自适应网页在线查看工具：Responsivator（开源的直接在https://github.com...**/ 媒体查询能够获取的值： 1.设备的宽和高device-width，device-heigth显示屏幕/触觉设备。 2.渲染窗口的宽和高width，heigth显示屏幕/触觉设备。...Weiyigeek.可用的设备特性参数 常规屏幕值选择： 电脑屏幕（x >=1024), PAD(1024> x >=768 ), 手机（760 > x)PX 案例：媒体查询的简单使用布局响应 的高度 initial-scale ： 初始的缩放比例 minimum-scale ： 允许用户缩放到的最小比例 maximum-scale ： 允许用户缩放到的最大比例...，来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保证其图片不失真，或者是采用JS插件来实现各个图片的缩放大小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
