响应式设计

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

开始

基本的思路

图片自适应

  • 去掉高度和宽度,只给一个max-width
  • 固定宽度或高度,使图片按照自身比例缩放
  • 固定宽度或高度,使图片按照自身比例缩放
  • 使用容器的padding-top来实现(积木中的等比实现方式)
  • 等等

字体自适应

  • em 相对当前元素的font-size, 如果当前元素没有设置,则继承自父元素
  • rem 固定根元素上字体大小,其他字体跟随缩放
  • vm, vh 这两个兼容性不大好,而且感觉用起来的场景不多

显示或者隐藏内容

  • display:none 一般实现是在A端上展示在B端上隐藏,或者一块内容使用两种展现形式,其中一种只在A端显示,另外一种只在B端展示

不建议后面一种方式,两套代码,很蛋疼

排版和布局

  • 通过样式在多端呈现不同的效果 ,如栅栏来实现内容块的等比缩放、或流式布局里面内容依次排列下来
  • 禁止缩放,避免如iphone上显示整个页面
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />

实现方式

图片类

一般是想通过各种方式来实现弹性图片的效果,在实现原理中也提供了几种方案,这里具体说明

css3伪类

其实这个和图片好像没关系,但是公众号上面可以看到一些简单的图行,如录播课btn、尖括号、人数的图标可以用伪类实现,这样就省去了图标的请求了,而且绝对不会模糊。 下面展示的直接是一个小人的伪类写法,效果看这里

<i class="i-people"></i>
.i-people:before {
  border-radius: 3.5px;
  width: 5px;
  height: 5px;
  left: 3px;
  top: 0;
}
.i-people:before, .i-people:after {
  content: '';
  display: block;
  position: absolute;
  border: 1px solid #bbb;
}

padding-top,padding-bottom的妙用

比如一般课程卡片是16:9的,而要实现等比缩放可以这么做。原理就是padding的值是基于自身的宽度来的

<div width=200>
    <img/>
</div>
div {
    padding-top:56.25%
}
img {
    width: 100%;
    height: 100%;
}

SVG

可缩放的矢量图形,和算法有关,做图标很爽,所以只能做一些偏简单的图形,图像就算了

三方库,如polyfill

<img src="path-to-default-image.jpg" alt="响应式图片的3种解决方案" alt=""
  srcset="path-to-default-image.jpg 600w 200h 1x,
                   path-to-another-image.jpg 600w 200h 2x,
                   path-to-a-third-image.jpg 200w 200h">

譬如:path-to-another-image.jpg 600w 200h 2x,说明可以在屏幕最小宽度600最小高度200情况下且支持retina情况下展示该图片,很强大。积木中的课程卡片采用这种处理方式。 项目地址

一种新的图片格式

flashpix可以根据浏览器发出的请求返回合适尺寸的图片

布局类

栅栏

这个业内有很好的实现,如bootstrap,很容易找到demo看。 算是当前积木系统中的课程卡片的核心原理了,通过将屏幕宽度分成12份,每块内容占制定的份数来展示内容。

这里开发老师模块的时候发现,交互和设计不按常理出牌,一块内容占3块嫌少,占4块嫌多,然后就很尴尬了。

流式布局

这种一般界面比较简单,百分比来控制,一般不够位置挤下来就是了

媒体查询

通过检测屏幕的宽度,从而在不同宽度下通过不同的样式来显示页面。比较方便。

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

下面这种写法挺吸引人的,省却了js判断,但是对于移动端或pc chrome&ff下支持,而IE6-8下面则需要引入一个js来hack下。(js文件压缩后是4.5kb,gzip后应该更小,可以尝试)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />

js控制

通过js来控制显示,会多出不少控制代码。 这里一般不会处理太细腻的操作,一般是布局方面的东西,或者就做pc或h5的分支,不会做的太细,否则代码难以维护。 比如积木中使用这个来判断移动端加载哪些css,pc端加载哪些css。

其他方案

  • 两套代码,根据UA来判断显示哪套,这个实现了响应式的效果,但是和我们讨论的响应式有点远。

总结

  • 响应式是一整套的东西,需要从产品-设计-开发整体来规划。遵循响应式设计的原则(如布局、元素变化呈现),在代码开始之前的大框架需要规划好。
  • 代码规划方面。由于响应式是多套代码,如何组织代码对后续维护影响很大。
  • 响应式的性能需要重点关注。如文件大小、资源加载情况、请求合并、图片大小等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。 当更新项目的...

2423
来自专栏Coco的专栏

使用 position:sticky 实现粘性布局

1524
来自专栏42度空间

【基础】固定列宽的表格及示例演示

对我来说,table 有一个非常有用,支持性也很好的 CSS 属性,但它却很少为人所知。它改变了表格的渲染方式,并生成一个更加稳定可靠的布局。

502
来自专栏HTML5学堂

IE6已逝,遗忘在角落的选择器,赶快用起来

那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍...

2729
来自专栏Web 开发

基于 styled-components 实现一套皮肤系统

styled-components 使用模版字符串特性,让我们可以保持原有 CSS 的书写习惯来编写 CSS,同时,利用 ${ props => props.t...

890
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2357
来自专栏达摩兵的技术空间

css3-not选择器妙用

css3中增加了not选择器,可以用于排除不符合某些规则的元素,下面我从语法,兼容性,可能的实践三个角度更好的学习使用它。

472
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

836
来自专栏天天P图攻城狮

例说 Constraint Layout:初探

谷歌的墙裂推荐,标志着 CL 布局的技术已经发展地成熟了,之前还在持观望态度的我们,是时候来深入了解一下这个 Android 布局的终极武器了。

2671
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.1K18

扫码关注云+社区