前言
在 1990 年初期，大多数的显示器屏幕为 640 * 480 像素，网页设计宽度也是按照 640 来设计，固定宽度和高度，称之为 “固定宽度设计”。 不久之后，随着设备更新，屏幕尺寸发生了变化，设计稿的宽度和高度也跟着变化，成了 网页设计师与硬件制造商的竞赛了。“固定宽度” 只会在特定的宽度下看起来不错，但当屏幕尺寸大于 或者 小于特定 特定宽度 时，效果就没那么好了，浪费了空间，不能合理的呈现页面效果。再到后来，有些人们采用 百分比来进行布局，而不是固定宽度布局。这样布局倒是比之前的布局效果好一点了，不过某些场景下，效果还是没那么好了，在宽屏幕上，布局就会被拉升； 在狭窄的屏幕上，布局会被压扁。 百分比布局 又称 液体布局。
再到现在，手机和电脑都需要跑不同尺寸的网页，这会出现了 “自适应布局”，解决了开发者设计者的困惑，开发者不需要单独去维护两套站点的代码和样式。 开发者需要写几种不同尺寸下的布局（媒体查询 ）效果。 相比之前的 固定布局 ， 液体布局好多了，不过还不是很完美。 后来，又有了 “响应式布局”，完美得解决了之前的问题， 自适应布局 是 媒体布局 + 固定布局 混搭， 而 响应式布局是媒体布局 + 流动布局的混搭。
复制代码
在手机上，如果想使用响应式布局，必须高速浏览器不能进行缩放，宽度为设备的宽度，因为移动浏览器会以 980 像素来解析布局。
<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码
固定布局 → 百分比布局 → 自适应布局 → 响应式布局
媒体布局
使用媒体查询可以设计不同尺寸的布局。媒体查询通过 @media 来启动规则匹配样式
查询条件
当媒体匹配到 某个条件时，才会执行相应的样式代码。
媒体查询语法：
@media type and (feature)
复制代码
type：
all 应用于所有设备
print 应用于打印机和打印预览
screen 应用于电脑，平板
默认为 all
操作符
@media (min-width: 700px) and (max-width: 1000px) { ... }
@media only screen and (min-width: 1024px){ ···}
@media (max-width:500px) , (orientation: landscape) { ···}
@media not screen and (min-width:800px) and (max-width:1200px),print and (color) { ···}
复制代码
根据浏览器窗口模式 调整样式
通过orientation可以用来测试的媒体功能：
@media all and (orientation: landscape) { // Styles for landscape mode.}@media all and (orientation: portrait) { // Styles for portrait mode.}
复制代码
根据视口大小调整样式
浏览器宽于特定宽度时，使用 min-width
@media (min-width: 400px) { // Styles for viewports wider than 400 pixels.}
复制代码
浏览器宽度小于特定宽度时,使用 max-width
@media (max-width: 400px) { // Styles for viewports narrower than 400 pixels.}
复制代码
组合条件进行调整样式
@media (min-width: 600px) and (max-width: 1000px) { }
复制代码
内容基于图像时，单位最好为 像素 px
内容基于文字时，单位最好为相对单位 em
常见 PC 端适配代码
/* 适配各种屏幕尺寸 */@media (min-width: 1024px){ body,html{font-size: 18px}}@media (min-width: 1100px) { body,html{font-size: 20px}}@media (min-width: 1280px) { body,html{font-size: 22px;}}@media (min-width: 1366px) { body,html{font-size: 24px;}}@media (min-width: 1440px) { body,html{font-size: 25px;}}@media (min-width: 1680px) { body,html{font-size: 28px;}}@media (min-width: 1920px) { body,html{font-size: 33px;}}
复制代码
响应式图像
在网页中，图像是有固定大小的，如果图像比屏幕宽，图像就会溢出，出现水平滚动条显示。
幸运的是，CSS 提供了 一个 属性来约束这种情况。 max-inline-size
它也可以将相同的规则应用于其他类型的嵌入内容。
浏览器将自动缩小图像以适应屏幕
img,video,iframe { max-inline-size: 100%; block-size: auto;}
复制代码
图像加载提示
给 img 加上 loading 属性，可以告诉浏览器以何种方式加载图像。
<img src="xxx.jpg" alt="" loading="eager">
复制代码
图像解码
img 还可以添加 decoding 属性，告诉浏览器图像可以异步解码，可以优先加载其它资源。
decoding="async"
<img src="xxx.jpg" alt="" loading="eager" decoding="async">
复制代码
响应式图像
虽然前面可以用 max-inline-size:100`` 让图片完美的显示在浏览器中，但有时可能需要根据不同尺寸显示不同宽度的图片效果，就可以使用 srcset` 属性，让浏览器加载不同图片。
场景： 当需要不同尺寸的同一图像版本时使用。
<img src="small-image.png" srcset="small-image.png 300w, medium-image.png 600w, large-image.png 1200w">
复制代码
图像格式
前面说到可以通过 srcset 来改变图像使用的版本，如果想完全改变图片格式的话，那么就可以采用 picture 元素。
picture 于 img 嵌套使用，如果单独使用没效果。
通过 source 来告诉浏览器怎么加载图像格式，每个 source 都有自己的 srcset 属性，然后浏览器会按顺序执行，直到满足为止，如果 浏览器不支持source 的属性，最后就执行 src
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="" decoding="async"></picture>
复制代码
网站主题化
提供黑暗模式
可以使用 使用元素prefers-color-scheme内的媒体功能指定主题颜色，分别写 light 和 dark 一套样式代码
https://storage.googleapis.com/web-dev-uploads/video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/hpMyDvtHUyLPz0ltO6SS.mp4
@media (prefers-color-scheme: dark) { body{ color: red; font-size: 22px; }
}
@media (prefers-color-scheme: light) { body{ color: rgb(17, 61, 183); font-size: 33px; } }
复制代码
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ max-inline-size: 100%; } @media (prefers-color-scheme: dark) { body{ color: red; font-size: 22px; }
}
@media (prefers-color-scheme: light) { body{ color: rgb(17, 61, 183); font-size: 33px; } } </style></head>
复制代码
表单主题化
浏览器为表单域提供了默认的调色板。让浏览器知道您的网站同时提供深色和浅色模式。这样，浏览器可以为表单提供适当的默认样式。
使用[accent-color](https://web.dev/accent-color/)CSS 中的属性来设置复选框、单选按钮和其他一些表单字段的样式。
将此添加到您的 CSS 中：
html { color-scheme: light;}@media (prefers-color-scheme: dark) { html { color-scheme: dark; accent-color: pink; }}
复制代码
您也可以使用 HTML。head在您的文档中添加以下内容：
<meta name="supported-color-schemes" content="light dark">
复制代码
评论