响应式设计和媒介查询的基本原理

灰太狼 2022-06-08 13:46 184阅读 0赞

随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。

文中提到的响应式[网页设计][Link 1]（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。

第一步：Meta标签（查看演示）

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

第二步：HTML结构

在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。

第三步：媒介查询-Media Queries

CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

然后为小于等于700像素的视图指定\#content和\#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

对于小于等于480像素（手机屏幕）的情况，将\#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

本文摘自马海祥seo博客，相关文章推荐：[**响应式网页设计的排版设计趋势**][Link 2]

[Link 1]: http://www.mahaixiang.cn/wzsj/
[Link 2]: http://www.mahaixiang.cn/wzsj/1113.html

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue响应式原理和本质 | 实现一个完善的响应式系统

文章目录前言响应式响应式的本质基本实现和工作原理完善的响应式前言 > 本篇文章代码思路来自Vue3

╰半橙微兮°/ 2024年02月20日 04:12/ 0 赞/ 69 阅读

相关响应式系统的基本原理

响应式系统的基本原理响应式系统 Vue.js 是一款 MVVM 框架，数据模型仅仅是普通的 JavaScript 对象，但是对这些对象进行操作时，却能影响

小鱼儿/ 2023年03月01日 10:46/ 0 赞/ 7 阅读

相关面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？

![d0737be6736d578693ff5e4ded9706d3.png][] 一、是什么响应式网站设计（Responsive Web design）是一种网络页

我不是女神ヾ/ 2023年01月13日 09:11/ 0 赞/ 172 阅读

相关【css】响应式布局 @media媒介适配平板手机

// 大型设备(大台式电脑，1200px 起) @media screen and (min-width:1200px) { /

雨点打透心脏的1/2处/ 2022年09月09日 06:13/ 0 赞/ 253 阅读

相关响应式设计

最近响应式设计很火，而我对其的理解也比较片面，向总的来写一篇关于响应式的笔记。。。~ 我以前对响应式的理解或许更多集中在对于不同屏幕有不同的响应，也就是使用媒体查询功能来实现

一时失言乱红尘/ 2022年07月27日 14:58/ 0 赞/ 260 阅读

相关响应式设计之媒介查询

你必须像水那样无形：当你把水倒进杯子中，水就变成了杯子的形状；当你把水倒进瓶子中，水就变成了瓶子的形状；当你把水倒进茶壶中，水就变成了茶壶的形状。 — 李小龙之前读《响应

客官°小女子只卖身不卖艺/ 2022年07月24日 03:25/ 0 赞/ 217 阅读

相关响应式布局之媒介查询和百分比

百分比 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

川长思鸟来/ 2022年06月09日 13:16/ 0 赞/ 194 阅读

相关响应式设计和媒介查询的基本原理

随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介

灰太狼/ 2022年06月08日 13:46/ 0 赞/ 185 阅读

相关媒介查询

媒体查询 /\ 例子：min-width:600px,max-width:600px 具体含义，max-width:屏幕宽度小于600时做用（+,600）） m

叁歲伎倆/ 2022年06月01日 04:48/ 0 赞/ 351 阅读

相关响应式网站设计（6）-媒体查询

媒体查询调试工具在PC端样式设置完毕之后，我们需要适配移动端。首先，我们选择的设备类型不是某一种设备，而是responsive。另外，我们可以打开标签和

我不是女神ヾ/ 2021年09月16日 04:32/ 0 赞/ 361 阅读