本文介绍了CSS3中的响应式网页设计，包括媒体查询@media的使用，响应式设计的基本概念，如液态网格和媒体查询的应用。文章讨论了如何通过设置断点和使用现代布局技术来适应不同屏幕尺寸，强调了移动优先设计的重要性。此外，还探讨了响应式图片、视口元标签以及响应式排版等关键点，帮助读者理解如何创建适应不同设备的网页。
微信改版了，现在看到我们全凭缘分，为了不错过【全栈工程师修炼指南】重要内容及福利，大家记得按照上方步骤设置「接收文章推送」哦~
关注【公众号】回复【学习交流群】加入【SecDevOps】学习交流群!
原文链接：
https://mp.weixin.qq.com/s/O0QjAXIBFnonDiC7zQ0SzA文章目录：
各位小伙伴们，有好久不见，过了一个中秋国庆感觉自己对学习都懈怠了，对于一个想成为全栈的男人这是不允许的，遂继续完成《前端学习之路》相关文章的更新，请各位小伙伴们多多鞭策我!
0x00 前言简述
敲黑板，响应式设计是前端页面开发学习中最重要的一篇，响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术，现在基本上就是我们默认建设网站的方式。
在早期设计Web时由于设备是特定的屏幕大小，所以设计者基本是按照主流行的手机和平板的屏幕尺寸来呈现内容就算完毕了；而随着社会科技的不断发展，人们使用的电子设备的屏幕尺寸的种类越来越多（不同品牌的手机、ipad平板、电脑），遂出现了响应式网页设计的概念（responsive web design，RWD）指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践，当前由于移动设备的发展迅猛，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像 m.example.com 或者 example.mobi这类）, 在早期开发中这意味着一个网站需要开发两个分开的版本，而且要保持时效性；而现在使用响应式设计的页面只需要一个版本上开发即可，即移动端与PC端同步开发。
发展历史:
-
早期网站设计，通常有两个选择，一是创建一个
“液态”站点，它会拉伸以充满整个浏览器视窗；二是创建一个“固定宽度”站点，它有一个以像素计的固定尺寸,而两种途径会倾向于导致它的表现只有在设计者的屏幕上才是最佳的。
-
“液态”站点布局 ：导致在小屏幕上的设计会挤成一团，以及大屏幕上难以阅读的很长的行长度 -
“固定宽度”站点布局：导致比站点更窄的屏幕上会出现一个水平滚动条，在大屏幕上的设计边缘还会有许多空白。
中期网站设计：为尽力解决建设网站时使用液态和固定宽度的方式所带来的弊端，2004 年，Cameron Adams 写了一篇题为《Resolution dependent layout》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式,此种方式需要 JavaScript 来探测屏幕的分辨率，从而载入恰当的 CSS 样式。
响应式网站设计：此概念由 Ethan Marcotte 在 2010 年首度提出, 他将三种技术的混合使用从而实现网站页面的自适应。
-
第一个是液态网格（
Fluid Grids）. -
第二个是液态图像（
Fluid image）, 通过将max-width属性设置为100%，从而让图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。 -
第三个是媒体查询（
Media query）, 在以前媒体查询由 JavaScript 实现的布局类型切换，而如今以只使用 CSS 实现，从而在不同屏幕尺寸中显示不同站点界面样式。
1.响应式设计简单了解
1.媒介查询(Media query): 允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。
使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局，这经常被描述为移动优先设计。
/* 例如，当视口至少有 800 像素宽时， .container 选择器元素上下、左右外边距将分别设置为1em、2em大小 */
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}2.灵活液态网格(Liquid Grids): 响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活液态网格上的。在他对于液态网格文章的原文中，Marcotte 详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计, 如target / context = result。
<style>
/* 改变盒模型 */
* {
box-sizing: border-box;
}
/* 宽度: 720 + 240 + 20 */
body {
width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 20px;
}
/* 清除网格中每行的浮动 */
.row {
clear: both;
}
/* 例如, 如果我们的预期栏尺寸为 60 像素，而且它所在的上下文（或者容器）为 960 像素宽度，我们在将零点二的空间移动到右边以后，用 960 去除 60，得到我们能够使用在我们的 CSS 上的值。
列与列之间保持 20 像素的间隔
*/
.col {
float: left;
width: 6.25%; /* 60 / 960 = 0.0625 */
margin-left: 20px;
background: rgb(255, 150, 150);
}
</style>
<div class="wrapper">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
</div>3.现代布局技术: 通常会使用多列布局（Column）、伸缩盒 （Flexbox）、CSS 网格（Grids）
/* 1.列布局，指定显示多少列或者指定列的宽度（尽可能的创建此宽度的列） */
.container {
column-count: 3;
column-width: 10em;
}
/* 2.伸缩盒布局，Flexible 可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。 */
.container {
display: flex;
}
.item {
flex: 1 200px;
}
/* 3.网格布局, fr单位许可了跨网格轨道可用空间的分布，如创建3 个大小为1fr的轨道的网格容器 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}4.响应式排版，一是使用媒介查询分别让移动端与PC端设备显示同内容而不同的文本大小，二是还可以使用视口单位vw来实现响应式排版,1vw等同于视口宽度的百分之一，即如果你用vw来设定字体大小的话，字体的大小将总是随视口的大小进行改变。
html { font-size: 1em;}
h1 { font-size: 2rem;}
/* 屏幕尺寸大于1200px时，h1 元素内容字体大小修改为 4 rem。*/
@media (min-width: 1200px) {
h1 { font-size: 4rem; }
}
/* 使用 calc() 实时根据视觉窗口计算字体大小,使得可以正常缩放页面。*/
h1 { font-size: calc(1.5rem + 3vw);}5.响应式图片，使用了<picture>和<img>元素的srcset和sizes 特性，浏览器将会选择对设备最合适的图像，以确保用户下载尺寸适合他们使用的设备的图像。
<!-- img 示例，当屏幕尺寸小于600px时，图像将填充为槽的宽度 480px -->
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,800px"
src="elva-fairy-800w.jpg"
alt="响应式图像" />
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
<source media="(min-width: 800px)" srcset="elva-800w.jpg" />
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>6.视口元标签，在HTML5网页中你通常将会在文档的<head>看到<meta>标签中name="viewport"的元素标签。
<!-- 1.告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，而在移动端以你所希望的为移动优化的大小展示文档。
通过设定width=device-width，你用设备的实际宽度覆写了苹果默认的 width=960px，然后你的媒介查询就会像预期那样生效。
-->
<meta name="viewport" content="width=device-width,initial-scale=1" />视口元标签 content 属性其他设定值介绍说明:
-
height：特别为视口设定一个高度。
-
initial-scale：设定了页面的初始缩放，通常设定为 1。
-
minimum-scale：设定最小缩放级别。
-
maximum-scale：设定最大缩放级别。
-
user-scalable：如果设为no的话阻止缩放。
温馨提示: 你应该避免使用minimum-scale、maximum-scale，尤其是不要将 user-scalable 设为 no ,用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。
2.响应式设计属性一览
# CSS 关键字
@media 媒体查询 : 让浏览器根据设备的视口大小选择预定义的CSS样式。
@import 用于从其他样式表导入样式规则，但是其不能不能在条件组的规则中使用。
# HTML 元素标签
style : media="screen and (min-width: 640px)"
link : media="screen and (max-width: 640px)"
img : sizes="(max-width: 640px) 480px,800px"
picture > source : media="(max-width: 640px)"总结说明描述: 通过上述学习读者应知道响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词; 现代的 CSS 布局方式基本上就是响应式的，实现响应式设计也变得愈加简单。
0x01 响应式设计
@media - 定义媒体查询规则
描述: @media 媒体查询(media query)是响应式 Web 设计的关键部分，目前在众多主流浏览器中有良好的支持，它为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如视口(屏幕、窗口)尺寸宽于 480 像素的时候，与此同时它也可以用来探测和你的站点运行的环境相关联的其他条件，比如用户是在使用触摸屏还是鼠标。
另外，我们可以在样式表(style sheet)上加入多条 @media 媒体查询规则，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果, 在媒体查询样式改变时的点（即媒体特征规则临界点），被叫做断点（breakpoints）。
语法参数:
/* 语法 */
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
/* 参数 */
media-type 媒体类型
and 媒体逻辑表达式
media-feature-rule 媒体特征规则
/* 格式 */媒体类型
描述：Media Types允许你定义以何种媒介来提交文档，文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
-
all：用于所有的媒介设备
-
screen：用于电脑显示器
-
print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。（
-
aural：用于语音和音频合成器
-
braille：用于盲人用点字法触觉回馈设备
-
embossed：用于分页的盲人用点字法打印机
-
handheld：用于小的手持的设备
-
projection：用于方案展示，比如幻灯片
-
tty: 用于使用固定密度字母栅格的媒介，比如电传打字机和终端
-
tv: 用于电视机类型的设备
例如，页面在打印或者电视TV浏览时，body元素所包含的字体将设置为12pt，而当页面在浏览器中载入的时候，它将不会生效。
/* 例如，此 CSS 针对打印机 */
@media print { ... }
/* 例如，此@media规则使用两个媒体查询来同时定位屏幕和打印设备 */
@media screen,print {
body {
font-size: 12pt;
}
}温馨提示: 媒体类型的名称是不区分大小写的。
温馨提示: 某些 CSS 属性仅仅被设计为针对某些媒介，比方说 "voice-family" 属性被设计为针对听觉用户终端，其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上 serif 字体更易阅读。
媒体特征规则
描述: 在指定了类型以后，你可以用一条规则指向一种媒体特征, 其常用的媒体特征如下所示:
-
width/height：视口宽和高, 一般最常探测的特征是视口宽度，而且我们可以使用min-width/height、max-width/height和width/height媒体特征, 指视口宽度在大于、小于、等于宽和高尺寸时应用CSS -
aspect-ratio: 视口（viewport）的宽高比。 -
orientation：视口的旋转方向,探测设备是竖放（portrait mode）还是横放（landscape mode）模式, 通常标准的桌面视图是横放朝向的，而处于竖放模式的手机或平板电脑视图需要竖放显示更好
-
color: 输出设备每个颜色分量的比特值，如果设备不支持输出彩色，则该值为 0。 -
color-gamut: 用户代理和输出设备大致程度上支持的色域。于媒体查询第 4 版中被添加。 -
color-index: 输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0。 -
inverted-colors: 用户代理或者底层操作系统是否反转了颜色。于媒体查询第 5 版中被添加。 -
prefers-color-scheme: 检测用户倾向于选择亮色还是暗色的配色方案。
-
hover: 指点浮动, 测试用户是否能在一个元素上悬浮, 从而验证用户是否是在使用某种指点设备 -
any-hover: 是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上.
-
pointer: 指针点击，它可取 none(用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令)、fine(类似于鼠标或者触控板)和coarse(在触摸屏上的手指) 等三个值 -
any-pointer: 可用的输入机制中是否有任何指针设备，如果有它的精度如何.
-
display-mode: 应用程序的显示模式，显示模式由 web 应用的清单（manifest）中的 display 成员所指定 -
dynamic-range: 用户代理和输出设备支持的亮度、对比度和色彩深度的组合 -
forced-colors: 检测用户代理是否限制调色板。于媒体查询第 5 版中被添加。 -
grid: 输出设备使用网格屏幕还是点阵屏幕？ -
overflow-block: 输出设备如何处理沿块轴溢出视口的内容。于媒体查询第 4 版中被添加。 -
overflow-inline: 沿行轴溢出视口的内容是否可以滚动。于媒体查询第 4 版中被添加。 -
prefers-contrast: 检测用户是否有向系统要求提高或降低相近颜色之间的对比度。于媒体查询第 5 版中被添加。 -
prefers-reduced-motion: 用户是否希望页面上出现更少的动态效果。于媒体查询第 5 版中被添加。 -
resolution: 输出设备的像素密度（分辨率）。 -
update: 输出设备修改渲染内容的频率。于媒体查询第 4 版中被添加。 -
scripting: 检测脚本（例如 JavaScript）是否可用。于媒体查询第 5 版中被添加。
媒体逻辑表达式
在使用媒体查询时，你可能想要把它们混合起来，或者建立查询列表——其中的任何一个都可以匹配生效, 从而实现更复杂的媒体查询，此处我们可以使用与 and、或 or、非 not、only等逻辑运算符（logical operator）。
-
“与”逻辑，使用 and 操作符来拼接混合媒体类型和特征。
例如，我们可能会想要测得min-width和orientation，而 body 的文字只会在视口至少为 400 像素宽，且设备横放时变为蓝色。
@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } } -
“或”逻辑，使用逗号
,或者 or 操作符(于媒体查询第 4 版中被添加)分开这些查询。例如，文本会在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色，如果其中的任何一项成立则会触发此CSS规则。@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } } @media (screen and (min-width: 400px)) or (screen and (orientation: landscape)) { body { color: blue; } } -
“非”逻辑，使用 not 操作符来拼接混合媒体类型和特征。例如，文本只会在朝向为竖着的时候变成蓝色。
@media not all and (orientation: landscape) { body { color: blue; } } # 等价于 @media not (all and (orientation: landscape)) { ... }
例如，使用上述讲解的媒体类型和特性规则进行结合使用演示。
/* 例如，屏幕尺寸宽度等于 600px 时触发*/
@media screen and (width: 600px) {
body {
color: red;
}
}
/* 例如，屏幕尺寸宽度小于 400px 时触发*/
@media screen and (max-width: 400px) {
body {
color: blue;
}
}
/* 例如，媒体设备屏幕朝向横放时（ipad） */
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
/* 例如，此 CSS 将适用于任何带有彩色屏幕的设备 */
@media (color) { ... }
/* 例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比 */
@media speech and (aspect-ratio: 11/5) { ... }
/* 例如，结合了两种媒体功能，以将样式限制为宽度至少为 30 em 的横向的设备 */
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
/* 例如，如果用户设备的最小高度为 680px 或为纵向模式的屏幕设备，一真必真 */
@media (min-height: 680px), screen and (orientation: portrait) { ... }
@media (min-height: 680px) or (screen and (orientation: portrait)) { ... }温馨提示: 使用only关键字提升老版本浏览器兼容性，可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式，它对现代浏览器没有影响。
@media only screen and (color) { ... }
/* 例如，仅在 screen 整个查询匹配时才应用样式。 */
@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
body {
line-height: 1.4;
}
}温馨提示: 媒体查询 4 级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询（推荐使用）。
/* # 改进前 */
@media (max-width: 30em) { ... }
@media (min-width: 30em) and (max-width: 50em) { ... }
/* # 改进后 */
@media (width <= 30em) { ... }
@media (30em <= width <= 50em ) { ... }示例演示:
示例1.@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。
/* 1.在你的代码的顶层 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 2.嵌套至其他的 at 条件规则中 */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}示例2.在PC显示器上显示 14 像素的 Verdana 字体,但是假如页面需要被打印，将使用 10 个像素的 Times 字体，font-weight 被设置为粗体，不论显示器还是纸媒介：
@media screen{
p.test {font-family: verdana,sans-serif; font-size: 14px}
}
@media print{
p.test {font-family: times,serif; font-size: 10px}
}
@media screen,print{
p.test {font-weight: bold}
}示例3.测试屏幕是否可以悬浮，当鼠标滑动到 abbr 触发媒体查询，从而改变样式。
<style>
abbr {
color: chocolate;
}
@media (hover: hover) {
abbr:hover {
color: limegreen;
transition-duration: 1s;
}
}
@media not all and (hover: hover) {
abbr::after {
content: ' (' attr(title) ')';
}
}
</style>
<p>
<abbr title="Wei yi Geek">WeiyiGeek</abbr> is Computer technology enthusiasts，I firmly believe that programming will change the world and my life
</p>执行结果:
在 HTML 中使用媒体查询
描述：在 HTML 中，媒体查询可以应用于各种元素，例如<link>、以及 <source>、<style>和其他HTML元素指定特定的媒体类型。
-
在
<style>元素的 media 属性中，其定义待应用样式的媒体。 -
在
<link>元素的 media 属性中，其定义待应用链接资源（通常是 CSS）的媒体。 -
在
<source>(en-US) 元素的 media (en-US) 属性中，其定义待应用源的媒体。（这仅在<picture>元素内有效。）
示例演示:
<!-- 在 style 标签里面进行使用media属性 -->
<style type="text/css" media="all and (max-width: 500px)">
CSS Rules
</style>
/* 在 link 标签里面进行使用media属性 */
<link href="print.css" rel="stylesheet" media="print" />
<link
href="mobile.css"
rel="stylesheet"
media="screen and (max-width: 600px)" />
<picture>
<source srcset="logo-wide.png" media="(min-width: 800px)" width="800" height="600" />
<source srcset="logo-medium.png" media="(min-width: 600px)" width="600" height="400"/>
<img src="logo-narrow.png" alt="Web Docs" width="640" height="480"/>
</picture>在 JavaScript 中使用媒体查询
描述: 在 JavaScript 中，你可以使用 Window.matchMedia() 方法根据媒体查询测试窗口; 还可以使用 MediaQueryList.addListener() 在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置、方向或状态的更改。
备注: 在 JavaScript 中，可以使用 CSSMediaRule CSS 对象模型接口访问使用 @media 创建的规则。
示例演示:
// 1.如果视口的宽度小于或等于 600 像素，则输出将为 true，而如果窗口的宽度大于此宽度，则将输出 false。
let mql = window.matchMedia('(max-width: 600px)');
document.querySelector(".mq-value").innerText = mql.matches;
document.querySelector(".mq-value").innerText = mql.media;
// 2.通过使用 max-width 媒体查询特性来创建一个媒体查询，以检测视口大小的变化
const para = document.querySelector("p");
const mql = window.matchMedia("(max-width: 600px)");
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = "This is a narrow screen — less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
/* the viewport is more than 600 pixels wide */
para.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
}
mql.addEventListener("change", screenTest);温馨提示: 此处由于我们还未学到JS相关知识，了解即可。
移动优先的响应式设计方式
描述: 可以采用两种方式实现响应式设计，一种是从PC端最宽的视图开始，然后随着视口变得越来越小，加上断点，把物件挪开，另外一种是叫做移动优先的响应式设计(推荐)，从最小的视图开始，随着视口变得越来越大，逐步增添布局内容。
温馨提示: 推荐大家从移动优先的响应式设计方式入手，从简到复杂（小到大）从而符合人类的学习曲线。
示例演示:
示例1.实现一个简单的移动优先布局。
<style>
/* 改变盒模型 */
* { box-sizing: border-box;}
body {
width: 90%;
margin: 2em auto;
font: 1em/1.3 Arial,Helvetica, sans-serif;
}
a:link,
a:visited {
color: #333;
}
nav ul,
aside ul {
list-style: none;
padding: 0;
}
/* 使用伪元素改变元素样式 */
nav a:link,
nav a:visited {
background-color: rgba(207, 232, 220, 0.2);
border: 2px solid rgb(79, 185, 227);
text-decoration: none;
display: block;
padding: 10px;
color: #333;
font-weight: bold;
}
nav a:hover {
background-color: rgba(76, 134, 201, 0.7);
}
article {
margin-bottom: 1em;
}
.related {
background-color: rgba(79, 185, 227, 0.3);
border: 1px solid rgb(79, 185, 227);
padding: 10px;
}
.sidebar {
background-color: rgba(207, 232, 220, 0.5);
padding: 10px;
}
/* 移动优先的原则，当屏幕尺寸大于 40em * 16px = 640*/
@media screen and (min-width: 40em) {
/* 网格布局 */
article {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
}
/* 伸缩盒布局 */
nav ul {
display: flex;
}
nav li {
flex: 1;
}
}
</style>
<div class="wrapper">
<header>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Meet the team</a></li>
<li><a href="">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div class="content">
<h1> About | 作者介绍 </h1>
<p> 作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。</p>
<p> 从上面的技术栈中, 切实的体会到自己的知识匮乏, 我朝着技术狂热者前进，在漏洞挖掘、系统安全运维以及开发方面不断学习实践, 其中有血与泪同时也从中收获满满，并找到人生的价值方向，我坚信编程会改变世界、改变我的一生; </p>
</div>
<aside class="related">
<p> 欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及欢迎同道中人加入到小白到大神 <a href=" https://weiyigeek.top/visit.html">学习交流群</a>。</p>
</aside>
</article>
<aside class="sidebar">
<h2>作者学习笔记</h2>
<ul>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">Security books url</a>
</li>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">DevOps books url</a>
</li>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">Code books url</a>
</li>
</ul>
</aside>
</main>
<footer>
<p> 原文作者: WeiyiGeek [https://weiyigeek.top]<br>
转载注明出处，原文地址：https://blog.weiyigeek.top/2018/1-1-1.html<br>
更多最新文章, 请关注我的微信公众账号【WeiyiGeek】或者【B站专栏】哟, 谢谢支持！(๑′ᴗ‵๑) ❤<br>
</p>
</footer>
</div>执行结果:
总结说明
描述: 响应式设计指的是一个响应浏览环境的网页或者应用设计，其涵盖了很多 CSS 和 HTML 的功能和技术，现在创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。
@import- 根据媒体查询规则导入样式
描述: @import CSS@规则，用于从其他样式表导入样式规则，但是其不能在条件组的规则中使用。因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的 @import 规则，这些条件导入在 URI 之后指定逗号分隔的媒体查询。
语法参数:
/* 语法 */
@import url;
@import url list-of-media-queries;
/* 参数 */
url：其值是一个表示要引入资源位置的地址。
ist-of-media-queries：是一个逗号分隔的 媒体查询 条件列表，决定通过 URL 引入的 CSS 规则 在什么条件下应用。
/* 格式 */
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, print;
@import url("fineprint.css") print;
@import url("bluish.css") screen, tv;
@import url("landscape.css") screen and (orientation: landscape);示例演示
示例1.当屏幕小于640px时且横向时，修改文档h1元素字体颜色为红色，且响应式的页面展示。
<style>
@import url("landscape.css") screen and (min-width: 640px) and (orientation: landscape);
</style>
<main>
<article>
<div class="content">
<h1> About | 作者介绍 </h1>
<p> 作者【WeiyiGeek】是一个计算机技术热爱者 </p>
<p> 现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。</p>
<p> 从上面的技术栈中, 切实的体会到自己的知识匮乏, 我朝着技术狂热者前进，在漏洞挖掘、系统安全运维以及开发方面不断学习实践, 其中有血与泪同时也从中收获满满，并找到人生的价值方向，我坚信编程会改变世界、改变我的一生; </p>
</div>
<aside class="related">
<p> 欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及欢迎同道中人加入到小白到大神 <a href=" https://weiyigeek.top/visit.html">学习交流群</a>。</p>
</aside>
</article>
<aside class="sidebar">
<h2>作者学习笔记</h2>
<ul>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">Security | 网络安全学习笔记</a>
</li>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">DevOps | 运维笔记</a>
</li>
<li>
<a href="https://blog.weiyigeek.top/2018/1-1-1.html">Code | 编程开发笔记</a>
</li>
</ul>
</aside>
</main>
<footer>
<p> 原文作者: WeiyiGeek [https://weiyigeek.top]<br>
转载注明出处，原文地址：https://blog.weiyigeek.top/2018/1-1-1.html<br>
更多最新文章, 请关注我的微信公众账号【WeiyiGeek】或者【B站专栏】哟, 谢谢支持！(๑′ᴗ‵๑) ❤<br>
</p>
</footer>亲，文章就要看完了，不关注一下【全栈工程师修炼指南】吗？
landscape.css 样式表文件:
@charset "utf-8";
body { margin: 0;font-family: sans-serif;}
h1 {font-style: italic;color: red;}
/* 网格布局 */
main {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
}
article {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
margin: 1em;
text-align: left;
}
.related {
background-color: rgba(79, 185, 227, 0.3);
border: 1px solid rgb(79, 185, 227);
padding: 10px;
}
.sidebar,footer {
background-color: rgba(207, 232, 220, 0.5);
padding: 10px;
}显示结果:
本文至此完毕，更多技术文章，尽情等待下篇好文！
原文地址: https://blog.weiyigeek.top/2023/10-10-779.html
如果此篇文章对你有帮助，请你将它分享给更多的人!
学习书籍推荐 往期发布文章 
专栏推荐
欢迎长按（扫描）二维码 ，获取更多渠道哟!
欢迎关注 【全栈工程师修炼指南】(＾Ｕ＾)ノ~ＹＯ
作者微信【weiyigeeker】，拉你一起学习交流进步吧!
扫一扫
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
