当前位置：网站首页>关于Web响应式设计

关于Web响应式设计

2022-07-21 00:01:00 【InfoQ】


前言

在 1990 年初期，大多数的显示器屏幕为 640 * 480 像素，网页设计宽度也是按照640来设计，固定宽度和高度，称之为 “固定宽度设计”。 不久之后，随着设备更新，屏幕尺寸发生了变化，设计稿的宽度和高度也跟着变化，成了 网页设计师与硬件制造商的竞赛了。“固定宽度” 只会在特定的宽度下看起来不错，但当屏幕尺寸大于 或者 小于特定 特定宽度 时，效果就没那么好了，浪费了空间，不能合理的呈现页面效果。再到后来，有些人们采用 百分比来进行布局，而不是固定宽度布局。这样布局倒是比之前的布局效果好一点了，不过某些场景下，效果还是没那么好了，在宽屏幕上，布局就会被拉升； 在狭窄的屏幕上，布局会被压扁。 百分比布局 又称 液体布局。

再到现在，手机和电脑都需要跑不同尺寸的网页，这会出现了 “自适应布局”，解决了开发者设计者的困惑，开发者不需要单独去维护两套站点的代码和样式。 开发者需要写几种不同尺寸下的布局（媒体查询 ）效果。 相比之前的 固定布局 ， 液体布局好多了，不过还不是很完美。 后来，又有了 “响应式布局”，完美得解决了之前的问题， 自适应布局 是 媒体布局 + 固定布局 混搭， 而 响应式布局是媒体布局 + 流动布局的混搭。

在手机上，如果想使用响应式布局，必须高速浏览器不能进行缩放，宽度为设备的宽度，因为移动浏览器会以 980 像素来解析布局。

<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>

固定布局 → 百分比布局 → 自适应布局 → 响应式布局

媒体布局

使用媒体查询可以设计不同尺寸的布局。媒体查询通过 
@media 来启动规则匹配样式

查询条件

当媒体匹配到 某个条件时，才会执行相应的样式代码。

媒体查询语法：

@media type and (feature)

type：

  • all
     应用于所有设备
  • print
     应用于打印机和打印预览
  • screen
     应用于电脑，平板

默认为 
all

操作符

  • and
     : 合并查询条件
  • only
     : 仅在某个 
    type
     下显示
  • or
     : 满足多种条件时使用，用逗号分隔开
  • not
     : 
    不能应用于单独的媒体查询否定条件中，它只能应用于整个查询。

@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;
}

null

图像加载提示

给 
img
 加上 
loading
 属性，可以告诉浏览器以何种方式加载图像。

  • loading=lazy
     图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。
  • loading=eager
     默认，图像立即加载。

<img
 src=&quot;xxx.jpg&quot;
 alt=&quot;&quot;
 loading=&quot;eager&quot;
>

图像解码

img
 还可以添加 
decoding
 属性，告诉浏览器图像可以异步解码，可以优先加载其它资源。

decoding=&quot;async&quot;

<img
 src=&quot;xxx.jpg&quot;
 alt=&quot;&quot;
 loading=&quot;eager&quot;
 decoding=&quot;async&quot;
>

响应式图像

虽然前面可以用 
max-inline-size:100`` 让图片完美的显示在浏览器中，但有时可能需要根据不同尺寸显示不同宽度的图片效果，就可以使用 
srcset` 属性，让浏览器加载不同图片。

场景： 当需要不同尺寸的同一图像版本时使用。

<img
 src=&quot;small-image.png&quot;
 srcset=&quot;small-image.png 300w,
 medium-image.png 600w,
 large-image.png 1200w&quot;
>

图像格式

前面说到可以通过 
srcset
 来改变图像使用的版本，如果想完全改变图片格式的话，那么就可以采用 
picture
 元素。

picture
 于 
img
 嵌套使用，如果单独使用没效果。

通过 
source
 来告诉浏览器怎么加载图像格式，每个 
source
 都有自己的 
srcset
 属性，然后浏览器会按顺序执行，直到满足为止，如果 浏览器不支持
source
 的属性，最后就执行 
src

<picture>
 <source srcset=&quot;image.avif&quot; type=&quot;image/avif&quot;>
 <source srcset=&quot;image.webp&quot; type=&quot;image/webp&quot;>
 <img src=&quot;image.jpg&quot; alt=&quot;&quot; 
 decoding=&quot;async&quot;>
</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=&quot;UTF-8&quot;>
 <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;>
 <meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot; media=&quot;(prefers-color-scheme: light)&quot;>
 <meta name=&quot;theme-color&quot; content=&quot;#000000&quot; media=&quot;(prefers-color-scheme: dark)&quot;>
 <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
 <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=&quot;supported-color-schemes&quot; content=&quot;light dark&quot;>

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://xie.infoq.cn/article/19e62034824fb8abd6f1702a2

边栏推荐

猜你喜欢

随机推荐