媒体查询之响应式布局

什么是响应式布局?

1.网页可以根据不同的设备或窗口大小呈现出不同的效果

2.使用响应式布局可以使一个网页适配所有设备

3.响应式布局的关键就是媒体查询

4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。

媒体类型(media type) ：

类型	解释
all	所有设备
braille	盲文
tty	传真
print	文档打印
tv	电视
screen	彩电屏幕
handheld	手持设备

媒体特性(media features) ：

属性	解释
color	颜色
height	高度
width	宽度
orientation	横屏或竖屏
device-height	设备输出高度
device-width	设备输出宽度
device-aspect-ratio	高宽比

外链式CSS引入

不同宽度下界面颜色的变化

  <style>body {background-color: chartreuse;}/* 最小宽度是800px时 */@media (min-width:800px) {body {background-color: pink;}}/* 最小宽度是992px时 */@media (min-width:992px) {body {background-color: skyblue;}}/* 最小宽度是1200px时 */@media (min-width:1200px) {body {background-color: orange;}}/* 最大宽度是700px时 */@media (max-width:700px) {body {background-color: rgb(66, 8, 212);}}</style>
</head><body></body>

效果图

不同宽度下隐藏盒子

 <style>.box {width: 600px;height: 600px;/* background-color: cornflowerblue; */display: flex;margin: 0 auto;}.box>div {width: 200px;height: 200px;background-color: chartreuse;}.box>div:nth-child(2) {background-color: coral;}.box>div:nth-child(3) {background-color: yellow;}/* 宽度小于1200px时第二个盒子消失 */@media(max-width:1200px) {.box>div:nth-child(2) {display: none;}}/* 宽度小于800px时第三个盒子消失 */@media(max-width:800px) {.box>div:nth-child(3) {display: none;}}</style>
</head><body><div class="box"><div></div><div></div><div></div></div>
</body>

效果图

不同宽度下每行盒子个数变化

 <style>.box {width: 800px;display: flex;flex-wrap: wrap;margin: 0 auto;}.box>div {width: 25%;height: 200px;background-color: rgb(232, 107, 4);}.box>div:nth-child(2) {background-color: chartreuse;}.box>div:nth-child(3) {background-color: rgb(243, 9, 223);}.box>div:nth-child(4) {background-color: rgb(8, 206, 232);}/* 宽度小于992px时一行只显示2个盒子 */@media (max-width:992px) {.box>div {width: 50%;}}/* 宽度小于768px时一行只显示1个盒子 */@media (max-width:768px) {.box>div {width: 100%;}}</style>
</head><body><div class="box"><div></div><div></div><div></div><div></div></div>
</body>

效果图

媒体查询之响应式布局相关推荐

(day16)媒体查询和响应式布局
1.媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的 ...
CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
媒体查询响应式布局的几个尺寸_媒体查询实现响应式布局
本文主要介绍 @media 查询的使用.通过媒体查询,在不同的屏幕尺寸下,可以设置不同的样式.以此,可以完美解决不同屏幕适配的问题.话不多说,先来看看效果: CSS @media screen and ...
Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则响应式布局 <meta name="viewport" content="w ...
使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
媒体查询-响应式布局-BFC
媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
HTML CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容文章目录一.基础(HTML和CSS中较复杂内容) ...
响应式布局，你需要知道的一切
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...

媒体查询之响应式布局

媒体查询之响应式布局相关推荐

最新文章

热门文章