响应式Web设计基础与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Lovejulyer/article/details/70317628

本文介绍了响应式Web设计的基础知识，包括响应式Web设计的三剑客——流式布局、媒体查询和弹性图片。文章探讨了设计模式，如设备优先和移动优先，并概述了开发流程，强调适配性和迭代验证的重要性。此外，还提到了使用Foundation框架快速构建响应式网站，以及快速原型开发。最后，讨论了响应式布局的基础，如CSS盒模型、百分比布局和可缩放图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《响应式Web》(The Responsive Web) 学习笔记一

开创性技术文章：《Responsive Web Design》(Ethan Marcotte)

响应式Web设计的理念是：页面的设计与开发应根据用户行为以及环境设备（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。

响应式Web设计三剑客：

流式布局：以百分比为单位。如Bootstrap
媒体查询：设备类型，分辨率，屏幕物理尺寸及色彩等
弹性图片：图片可以根据当前的视窗自适应展示，包含图片，图标，图表及视频等

设计模式

设备优先：断点为了适应各种设备的宽度值，基于设备；
移动优先：根据内容的可读性，易读性来确定断点，从而无视设备。设计模式是基于内容的。

开发流程

响应式Web讲究适配性。团队间需要迭代和改进彼此的工作方式，用户体验和开发不断进行迭代。迭代周期中会不断交付和验证成果。
通过专注于适配并为网站提供一个
流式布局，网站将获得如下几点好处。

能够适配不同屏幕大小的布局技术；
使网站具有更快的响应速度–基于移动优先的原则，加载时间是开发时考虑的第要素。网站响应速度越快越好；
更简单的跨浏览器开发–用流式的CSS能更加简单地解决跨浏览器地布局问题。

媒体查询

<link rel="stylesheet" type="text/css" media="handheld" href="sansserif.css">

上述方式可以限制页面的CSS文件数量。

Foundation:快速制作网站的前端框架

快速原型

响应式布局基础

CSS盒模型
在CSS中使用百分比
容器，整分与等分
移动网络的核心是它能够将整个页面进行整分，二等分和四等分。等分处理取决于它们的优先级和它们是如何跟页面的其他内容相互作用的。
可缩放的图像
使用<figure>标签，更合乎作为图片容器的语义。

    figure{ width:100%; }
    figure img{
        width:100%;
    max-width:1000px;
        height:auto;
        display:block;
        margin:0 auto;
    }

强大易变的em

    1em = 16px;
    em是级联的。浏览器有一个默认的字体大小，通常是16px.

Web排版
WEB设计中的排版
 零基础也能看懂！写给设计师的前端小知识之网页排版（附实战）
CSS reset
CSS reset 样式表是给不同的浏览器一套统一的元素默认样式的CSS规则。
CSS 权重
你应该知道的一些事情——CSS权重