响应式网站的内容设计

更新日期: 2019-09-19阅读: 1.7k标签: 响应式

基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。

 

1  响应式图片显示内容设计

真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后在各自的媒体查询样式中使用对应的图片背景。再结合min-width、min-height、max-width、max-height等样式属性来限制窗口最小或最大宽度和高度,模拟响应式及流式布局,从而保证图片不失真。

如果是在html中加载图片,使图片适应不同分辨率的屏幕,则可以通过设置图片样式的百分比来实现。但是,它不仅包括缩放,同样重要的是减少传送给观众的图片。比如说用户是在移动设备中浏览网站,由于网速慢、流量少等因素,访客可能会放弃访问。为了减少这些元素给网站带来的影响,我们可以用更合适的图片替换访问者使用的设备中的数据。在开发时可以通过一些JavaScript插件来解决此类问题。

 

2  响应式文字显示内容设计

响应式的设计应该秉承“内容优先,移动优先”的原则。我们知道,网页中的内容主要是由文字、图片等元素组成的,那么文字该如何响应呢?排版是响应式Web设计最重要的内容之一,如果想让内容在所有尺寸的屏幕上友好地显示,那就绝对有必要为移动设备优化字体。我们可以使用不用单位的标准来实现这个目标,包括pixel(像素)、em、rem或者百分比。选择一个正确的标准对设计一个可塑的、响应式的交互界面是至关重要的。

 

1.pixel(像素)

很早之前,pixel(像素)就是被用作Web设计的单位,原因就是它本身固有的精密度和准确度。一旦字体赋予具体的值,就能在所有设备及浏览器中保持相同的大小。虽然这种方法提供了非常精确的大小控制,但它却与我们需要的弹性和响应式相违背。当你给一个“父”元素设置尺寸时,通过继承特性就会把尺寸“传递”给“子”元素(这就是为什么把css命名为“层叠”样式表)。例如,设置一个固定的像素值给body的font-size,就会把这个值“传递”给你所设计的所有其他元素。这时候,开发人员如果想单独地分配样式,就必须手动地设置不同的参数去覆盖已存在的样式。因此,基本编辑及调整将需要小心翼翼地对所有预设样式进行修改。这将引发的不只是不方便的问题,还会在各种浏览器和设备上出现显示不友好的问题,其中很多是由于选择字体大小而造成的。很多读者是在特定字体大小的情况下出现阅读障碍的,而这些都是要被防止出现的,尤其是考虑到我们响应式设计的目标是在所有的屏幕尺寸和视窗下很友好地显示。如果你的设计采用前卫的方法,那么精确的像素单位并不算是最好的选择。现在,设备有各种各样的屏幕尺寸,也就是不同像素宽高的屏幕。使用一个特定大小的字体来适应所有的屏幕,与我们的响应式设计是相违背的。

 

2.em

em也是一个表示大小的单位,可以定义font-size的值大小。举个例子:如果我们创建一个div包含font-size值为16px的文本,那么1em就代表16px,2em就等于32px,以此类推。em在所有浏览器中是可变化的,不需要为每个元素设置值,因为CSS具有继承特性,也就是“层叠”。很明显,使用em需要考虑优缺点。尽管使用em使得维护网站的成本降低,但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小。幸运的是,这个问题可以很容易地被解决,通过为大部分内容使用相同的计算单位,还需要添加一些简单的文本元素,如header和footer。

 

3.百分比

类似em单位,百分比也是可变化的、可被继承的。理论上,二者没有很大的区别,都是计算单位。实际上,需要理解二者的区别是自己计划使用哪种计算单位。你当然不想在指定的元素使用em,而在其他元素使用百分比。例如,CSS声明{ font-size:100%; },这样可以覆盖浏览器默认定义或者其他不想要的百分比声明,在这里,可以使用em单位。

 

4.rem

还有另外一个提供弹性字体大小的单位:rem(root Em)。这个rem与em很相似,不同的是,rem只定义“父”元素的尺寸。这个重要的不同点可以解决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包含嵌套的元素。然而,现在需要意识到的是,rem是一个很新的单位,因此不是所有的桌面浏览器都支持、解释或者很好地显示它们,至少目前是这种情况。

前面介绍的4种字体的计算单位,究竟哪一种更加适合响应式Web设计呢?可以确定的是,em使得字体更加容易缩放和维护。如果你打算使用百分比来增加字体大小,你将可能去改变应用于body的百分比,而不用作其他操作。维护是一个很大的问题,是需要你在设计中多多考虑的。

链接: https://www.fly63.com/article/detial/6934

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!