什么是响应式布局？同一行代码，适配不同的屏幕

一、媒体查询

1.1 基本语法

目标：能够根据设备宽度的变化，设置差异化样式

开发常用写法

媒体特性常用写法
- max-width（小于等于）
- min-width（大于等于）

@media (媒体特性) {选择器{样式}
}

1.2 书写顺序

min-width（从小到大）
max-width（从大到小）

1.3 （了解）完整写法

@media 关键词 媒体类型 and (媒体特性) { CSS代码 }

1.3.1 关键词

and
only
not

1.3.2 媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上三种情况

1.3.3 媒体特征

媒体特征主要用来藐视媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

特性名称	属性	值
视口的宽或高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-width	数值
屏幕方向	orientation	portrait：竖屏 landscape：横屏

1.3.4 link写法

外链式CSS引入

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">

1.3.5 隐藏

 <style>* {margin: 0;padding: 0;}.box {display: flex;width: 100%;}.left {width: 300px;min-height: 500px;background-color: pink;}.main {/* 除去左边侧边栏的300px，父元素剩余的宽度都给main，此时main实现了响应式功能，可以任意改变宽度 */flex: 1;min-height: 500px;background-color: skyblue;}/* 可是当屏幕小到一定程度之后，已经是手机端的大小了，main部分的宽度已经很小了，手机端也不需要侧边栏，所以要把侧边栏left隐藏 *//* 屏幕宽度小于768px的时候，被认为是手机端，隐藏侧边栏 */@media (max-width: 768px) {.left {display: none;}}</style>
<body><div class="box"><div class="left">left</div><div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div></div>
</body>

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

css学习12：过渡、变化、动画、响应式布局
元素的动效二十二.过渡 transition 在英文中是过渡的意思,过渡可以为一个元素在不同状态之间切换不同的过渡效果.它由四个部分构成,分别是:过渡属性的名称,过渡需要的时间,过渡的方式和过渡的延 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
html响应式布局_媒体查询
html响应式布局_媒体查询 1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件 <link href="styl1.css" type="text/c ...
媒体查询-响应式布局-BFC
媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...
(day16)媒体查询和响应式布局
1.媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的 ...
前端学习第16天：媒体查询-响应式布局
第16天 1.媒体查询说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒 ...
响应式布局之媒体查询
媒体查询主要是对各种移动端设备的一个响应式兼容,可以在 @media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要 ...
2.4移动Web网页开发——响应式布局（含媒体查询和bootstrap）
响应式布局适合用于企业网站和非常非常小的布局,不适合电商网站(PC.移动分开做) 媒体查询视口宽度变化@media(max-width: 768px){} @media(max-width: 76 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...

响应式布局——媒体查询

一、媒体查询

1.1 基本语法

1.2 书写顺序

1.3 （了解）完整写法

1.3.1 关键词

1.3.2 媒体类型

1.3.3 媒体特征

1.3.4 link写法

1.3.5 隐藏

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

最新文章

热门文章