1.6 响应式设计

服务器

浏览数:53

2020-6-28

响应式设计

背景

上网,从我们坐在靠椅上,看着电脑显示屏,到每个人随处随地地上网。互联网终端从主要的计算机为主体,到全民普及的手机终端为主。网页的布置不得不适应时代的变化。

最开始,网站设计者直接将手机访问直接转到 m 为三级域名代表手机页面的网页。这样在当时解决了手机用户访问的问题。可移动端开始千奇百怪地变化,ipad、ipad Mini、平板、折叠手机、电视的到来,又成了难题,不可能继续无限制的增加分离的网页。所以,应当有一个一劳永逸的办法,能适配不同终端的访问,这就是我们需要考虑的响应式设计。

设计原则

从移动端开始

不同的设备,显而易见的差别就在于尺寸的不同。先从那种尺寸开始设计尤为重要,这涉及到其它尺寸的适配难度。若从大到小,容易崩坏页面布局,内容安置。网页设计应当先有内容,再有布局,与之相仿的,移动端由于屏幕太小,手机用户往往也只关心网站的内容,故也是以内容为主,所以先从移动端,或者说是受众群体广的小尺寸用户为主。

先从移动端设计好基本内容,再对较大尺寸的美观设计。设计重心的转移相对简单流畅。

meta 设置
<meta name="viewport"
content="width=device-width, initial-scale=1">

不设置的话,移动端默认网页没有响应式设计,并尝试模拟电脑浏览器浏览。

媒介分离

media feature 节点设置,由小而大,逐步覆盖,转换样式。用的最多的 一般是 @media (min-width: xxx)

最好用em为单位,适用性广,且用户可调节

media type有screen 和 print,一般不用关心 print 打印功能,除了一些文档页面的打印,应该去除一些不必要的头部、背景、颜色

流体设计

用户在主动改变浏览器尺寸时,比如电脑浏览器尺寸的调整,手机的分屏功能等等已有或以后的功能,流体设计会让响应式页面更流畅,用户体验更好。

更多的使用em、百分比,响应式布局。少使用固定尺寸,固定样式。

图片压缩

图片是流量的大头,必须涉法减少图片体积,并不影响用户体验。

  • css 的at-rule @media 可以选择性加载图片
  • html 可以srcset属性设置

作者:小津