首页 SEO培训正文

响应式布局该怎么设计 (响应式布局该怎么做)

SEO培训 2025-02-08 19

本文目录导航：

响应式布局该怎么设计
什么是响应式编程
响应式原型的7个常见错误

响应式布局该怎么设计

三、响应式布局该怎么设计?那在我们的实际专案中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的相容性的困扰，现在还要来个不同尺寸装置，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的介面。

接下来就一起来深入的了解Media Query。

当浏览器的解析度小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设定为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。

同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。

看看我们的例子：/* 当浏览器的可视区域小于980px */@media screen and (max-width: 980px) {#wrap {width: 90%; margin:0 auto;}#content {width: 60%;padding: 5%;}#sidebar {width: 30%;}#footer {padding: 8% 5%;margin-bottom: 10px;} }/* 当浏览器的可视区域小于650px */@media screen and (max-width: 650px) { #header {height: auto;}#searchform {position: absolute;: 5px;right: 0;}#content {width: auto; float: none; margin: 20px 0;}#sidebar {width: 100%; float: none; margin: 0;} }通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设定几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸装置来进行响应式的布局。

为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：/* 禁用iPhone中Safari的字号自动调整 */ { -webkit-text-size-adjust: none; }/* 设定HTML5元素为块 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }/* 设定图片视讯等自适应调整 */img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } embed, object, iframe { width: 100%; height: auto; }最后要注意的是在页面的头部<head></head>之间加上下面这句∶<meta name=viewport content=width=device-width; initial-scale=1.0>meta viewport这个属性是在移动装置上设定原始大小显示和是否缩放的宣告。

引数设定∶width – viewport的宽度height – viewport的高度initial-scale – 初始的缩放比例minimum-scale – 允许使用者缩放到的最小比例maximum-scale – 允许使用者缩放到的最大比例user-scalable – 使用者是否可以手动缩放最后对于在IE浏览器中不支援media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用即可。

示例：

响应式布局该怎么设计 (响应式布局该怎么做)

还是跟平常的设计一样。

只是会用@media 判断萤幕尺寸，多写几套样式而已。

directive返回物件里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~ directive的简单写法 (ngBlur, function($document)

响应式网站是用目前最新的网页制作技术5来做的，他可以根据使用者所用客户端来自动识别是pc端还是移动端，从而给出最合适的显示方式。

只要你会5，就可以做响应式布局。

如果不用5语言写，那就用普通的4来写，宽高用百分比来表示就行，赵一鸣随笔部落格就是用百分比来表示的，你可以搜寻开启网站看一下。

如果我的回答对你有用，可以采纳哦！

什么是响应式编程

响应式编程是一种编程范式，它关注于对系统变化的响应。

响应式编程主要处理异步数据，特别是在处理大量数据或数据流时表现尤为出色。

与传统的阻塞式编程不同，响应式编程更加关注如何响应系统中的事件、消息或数据变化，它主张以数据流为核心构建系统。

当系统中的某个部分发生变化时，响应式编程模型能够自动触发相应的响应，使系统更加灵活和可扩展。

响应式编程特别适用于处理不确定性、异步性，以及在复杂数据流中进行数据处理和事件驱动的编程场景。

在现代应用程序开发中，尤其是在构建实时、动态交互的应用时，响应式编程已经成为一种重要的解决方案。

通过使用响应式编程模型，开发者可以更好地管理数据流和异步操作，确保系统在面对大量数据或复杂事件时依然保持高性能和稳定性。

为了实现响应式编程，开发者需要使用诸如观察者模式或数据流框架等核心概念和技术。

在这种模式下，当数据源发生变化时，所有相关的订阅者或观察者都会收到通知并作出相应的响应。

这种机制使得开发者能够更轻松地构建可扩展、灵活且响应迅速的系统。

随着技术的发展和应用的复杂性增加，响应式编程已成为许多领域开发的重要工具之一。

无论是在Web开发、移动应用还是物联网领域，响应式编程都在发挥着越来越重要的作用。

总的来说，响应式编程是一种关注系统变化并据此作出响应的编程范式。

它特别适用于处理异步数据和事件驱动的场景，有助于构建高性能、稳定和灵活的系统。

通过使用响应式编程模型和相关技术，开发者能够更有效地管理和处理数据流，从而为用户提供更好的体验。

响应式原型的7个常见错误

Envision的Jeremy Girard回顾了响应式设计中最常见的错误。

响应式设计已经不仅仅是一个流行的设计趋势，这是从桌面端浏览转移至移动端浏览的一次巨大转变。

为了从行业现状中生存，网页设计师们不得不支持多屏幕多设备，而一个响应式策略可以解决适配的问题。

图片来源于PlasmaComp，原地址在想法形成的过渡阶段，原型在整个设计过程中分量很重。

这篇文章评述了在响应式设计中最常犯的原型错误，以确保你的响应式设计是具有前瞻性的，而不是倒退的。

01.不针对屏幕而针对设备设计根据OpenSignal提供的数据，现在市场上有24，093个不同的安卓设备，从去年的18，796个起——这还没有算上iOS和其它操作系统的设备。

这难以置信的差异使得针对某一机型进行设计是不可能的。

一个聪明的解决办法是专注于屏幕的尺寸。

图片来源于Luke Wrobelwski，原地址不要从可穿戴设备、手机、平板和台式机的角度进行考虑。

将你的原型分成：超小屏幕小屏幕中等屏幕大屏超大屏特定的屏幕尺寸将会在确定原型尺寸时提供更可靠的标准，因为不同设备间的区别实在太大了。

考虑所有不同的屏幕大小的手机：有的比小平板还大呢。

此外，专注于屏幕尺寸还能防止在设置响应式的临界点时太依赖设备的尺寸，这是我下面要描述的另一个常见错误。

（译者注：此处的临界点是指响应式网页发生布局变化的关键点，如当屏幕宽度小于480px时加载A样式，当宽度在480-600px之间时加载B样式。

我们不可能也没有必要为每个尺寸都做设计，需要做的一般是选定几个临界点做设计。

）02.只依赖设备尺寸进行临界点设定新的设备总是会不断推出，即使你能数得出每个可用设备的临界点，你的响应式网站将在下一个更大设备出现的时候变得过小。

图片来源于Stephanie Walter，原地址就像UXPin的《Web UI最佳实践》中解释过的一样，“建立在设计上，而不是设备”：从移动优先的策略开始：为最小的屏幕创建原型，然后调大比例。

顺带一提，iPhone在竖屏下是320像素宽。

如果你的很多用户都拥有可穿戴设备，你需要考虑微型的屏幕，用甚至更小的设计。

Apple Watch——继Pebble Time之后最小的设备——仅有272像素的宽度。

当你的设计工作开始感受到压力，添加media queries特性来做任一必要的改变，这样你的设计才能看起来舒服并在每一步中表现良好。

设计一个最大宽度为2000像素的已经能满足今天所有的可用的最大设备了。

根据W3Schools最新的浏览器数据统计，99%的访问者所用的浏览器远远不到2000像素宽。

根据设计的需要引入响应临界点，以避免在中间尺寸的设备中体验不佳。

建立一种能“响应”屏幕尺寸的设计方案，是响应式设计的天性。

03.忽视触屏控制触屏控制是众多移动设备的巨大优势之一：它们有趣，它们易用，同时它们还帮你节省时间。

不要在某些设备上疏忽了它们，因为其它设备不能使用。

这里有一些包含触屏控制的建议：了解每个设备的最佳实践。

在小屏设备上，左下角是大拇指最容易接触的地方，所以将你点击最频繁的按钮放在这里。

然而对平板来说，因为它们被拿的方式不同，顶部的边角是黄金接触点。

点击目标（如CTA按钮。

译者注：CTA即call to action。

）必须有足够的尺寸。

一个最小44点的点击区域需服从fat-finger-friendly（译者注：即较粗的手指也能点得到）原则。

元素之间的建议间距为至少23pt，以免点错。

为无hover状态适配。

你可以代替点击激活功能，或从一开始揭示hover元素的原生状态。

不要重复造轮子。

常用的手势比如滑动用于导航和其他功能，因为它们已经被用户熟知。

04.链接到手机上显示效果不佳的内容你不能设计让访问者从链接跳转到其他页面或内容，不管是在你的网站或其它地方。

响应式体验的一大问题就是当与你的响应式网站链接到非响应式设计的网页。

如果你的响应式网站链接到外站，你无法对此做些什么，除非考虑用一个可替换的网站。

然而，当链接到你可以控制的网站或资源，包括小网站或合作方的网站，你绝对想要确保它们提供了一系列良好的响应式体验。

05.对更大的屏幕缺乏计划我建议先为移动端设计，当并不意味着仅仅设计移动端。

即使更小的屏幕可能更受欢迎，42%的流量仍然来自桌面端的访问者。

这两种屏幕尺寸均需要被考虑到。

图片来源于UXPin这里有些来自《原型指南》的关于考虑“更大的视图”的建议：你需要做的不仅仅是将小屏幕的设计放大。

利用额外的空间，加一些新的元素，或重新创建视觉层级。

检查图片的质量——它们可能会在大屏幕中变得模糊。

相似地，检查文字长度的可读性。

在45至75字符之间是最优的。

你可以用Chris Coyer的书签测试你设计的长宽。

不要把字体放得太大。

过大的字体会占用有意义的水平空间，这将导致读者放慢阅读速度或跳过内容。

06.在不同的屏幕大小使用一样的导航同一设备中用一致的导航绝对是件好事。

但别太执迷于一种布局并将其反复地在其它设备上实践。

这与响应式设计的本质是相违背的。

图片来源于FiveSimpleSteps（桌面端）图片来源于FiveSimpleSteps（移动端）为维持一致的用户体验，有些一致性是好的。

为了建立一个易被认知的界面，并提示用户如何使用新设备的界面，某些元素应该保留和原来一样。

以下元素应该维持一致：链接或按钮文案字体颜色处理当今，不同的屏幕尺寸需要不同的导航系统。

以下元素在它们适应不同屏幕尺寸的细微差别时，不应该保持一致：按钮尺寸视觉布局导航功能——包括触屏控制比如，一个桌面端导航可以固定在屏幕的顶部。

当你为移动端屏幕重建布局时，你可以使导航持续出现并缩小尺寸来解决（但保持一个相似的颜色主题、字体和按钮文案）。

07.隐藏内容一个常见的错误观念曾经认为移动端用户是匆忙的，并且只想要“整个网站”的缩小版本。

诸如联系信息和指南这类内容被优先考虑，其它内容则被隐藏了。

现在我们知道大多数移动端用户一点也不匆忙，有68%的使用场景还是在家中。

大多数用户想要在移动设备上访问整个网站，他们想要无内容删减但重新排版的版本。

图片来源于UXPin知道某些人偏好的设备，并不等同于知道他们偏好的内容。

如果某内容在一台设备上对用户是重要的，那么很可能在另一台不同设备上对用户也是重要的。

此外，你必须考虑涉及多个设备的任务流。

用户经常在一台设备上开始任务，又在另一设备上完成，期间轮换使用这两台设备。

依赖设备的限制内容同时限制了用户如何交互。

根据渐进增强（译者注：一种网页设计策略，它强调可访问性、语义化HTML标记、外部样式表和脚本技术），为不同的屏幕尺寸呈现不同内容并区分优先级，但绝不要隐藏或限制内容本身。

扩展阅读这里提到的建议仅仅是免费电子书《2015和2016年用户体验设计趋势》的一个预览。

通过分析71个当今最好的UX实例，这份指南为日常设计将实用的趋势转变为简单的设计策略。

文字：Jeremy GirardJeremy Girard是有远见的顶级网页设计师/工程师，是罗得岛州的Envision公司的技术顾问。

他也在罗德州岛大学教授网页设计和前端开发。

他通过一款合作设计原型的应用UXPin为免费设计资源库贡献着内容。

译文地址：uxren原文作者：Jeremy Girard版权所有：UXRen翻译组译者：Denise审校：冬冬