响应式页面设计

日期:2016-8-1 13:51 | 标签: 响应式 | 阅读:764

说到响应式,浮现在眼前的是耳熟能详的框架如BootStrap、Semantic,这些框架使得我们简单给HTML标签加上属性就能够实现响应式,为了能够更好地利用这些轮子,我们还需要懂得其设计原理以及响应式的一些知识。

关于响应式

指Web设计应该做到根据不同设备环境自动响应及调整,响应式概念这么火,还得归功于多端(pad/mobile等)的崛起,此外,它的优势是平台兼容与无缝迭代。缺点嘛,浏览器不兼容咯,体验有待提升咯,此外,浏览器权限有限,获取底层接口能力明显不足。

设计步骤

  1. 设置 viewport meta 标签属性,如 initial-scale 要采用如下配置,可以保证 viewport 宽度与 device width 相同

    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, user-scalable=0">
    

    首先,有几点注意事项。

    • css中的1px并不等于设备的1px。
    • 如果你的网站不是响应式,千万不要强加这个标签。
    • IE8或更早的浏览器不支持Media Query,可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
      <!--[if lt IE 9]>  
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
      <![endif]-->
      
      关于每个属性的具体原理可以参考: http://littledu.github.io/,关于区分visual viewport与layout viewport的介绍很实用。
  2. 确定HTML结构 需要确定不同视图宽度的页面对应的HTML结构。

  3. 核心:Media Queries 根据条件告诉浏览器为指定视图宽度渲染页面。

    /*方式1*/
    @media screen and (device-width: 800px) { … }
    /*方式2*/
    <link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />
    

Flex布局

这是CSS3给前端工程师带来的一大法宝,可以解决很多布局问题,如圣杯布局,Grid布局,也可以解决如垂直居中等问题,当屏幕尺寸发生变化时可以灵活的自适应,而你要做仅仅是配置几个 css 属性而已。

响应式图片

  1. 浏览器获取用户终端的屏幕尺寸,根据尺寸处理图片
  2. W3C草案中的<picture>标签,可以由多个图片元素聚合,根据media query来显示。
  3. CSS Image Level 4,支持不完善
    background-image:url(default.jpg);  /* 普通屏幕 */
    background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */
    

响应式表格

  1. 浏览器获取用户终端的屏幕尺寸,根据尺寸隐藏掉部分列
  2. 列固定与列滚动
  3. 隐藏THead,使用伪元素显示表头名称,将Table-Cell改为块级布局。
    具体参考:响应式网页设计-isux

Margin&Padding同比例变化

使用rem
长度单位rem是相对于html标签的font-size来计算的,可以将屏幕宽度分为10份(计算方便)。设置html对应的font-size为1份像素宽度。

var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);

function setPxPerRem(){
     var dpr = 1;
     //把viewport分成10份的rem,html标签的font-size设置为1rem的大小;
     var pxPerRem = document.documentElement.clientWidth * dpr / 10;
     cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxPerRem();

margin和padding不使用px而使用rem,至此,技能get!
关于移动端适配设计,可以参考这篇文章,作者列举了如拉钩、网易、淘宝的适配方案:
http://bluereader.org/article/93156625
淘宝开源移动布局框架介绍:
http://caibaojian.com/flexible-js.html

方案(百度手机适配)

  1. 在页面head顶部引入flexible.js
  2. 计算字体基准值
    var docEl = document.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    
  3. 设置body的dont-size
    [data-dpr="1"] body{
     font-size: $font-baseline;}
    [data-dpr="2"] body{
     font-size: $font-baseline * 2;}
    [data-dpr="2.5"] body{
     font-size: $font-baseline * 2.5;}
    [data-dpr="2.75"] body{
     font-size: $font-baseline * 2.75;}
    [data-dpr="3"] body{
     font-size: $font-baseline * 3;}
    
  4. 根据设计稿宽度设置baseline & 根据标注原比例切图
    @import 'bsass/base';
    $rem-baseline: 64px;
    $font-baseline: 12px;
    .demo{
     @include rem(padding, 20px 30px);
     @include rem(height, 200px);
     //文字需要提前除以dpr
     @include fontsize(24px);}
    
  5. $rem-baseline计算:根据视觉稿宽度/10
  6. $font-baseline计算
  7. 距离720px设计稿切图
    • 宽高是多少就写多少,等比例切图
    • 字体是多少就写多少,等比例切图
    • 720视觉稿中360x360的div
      @import 'bsass/base';
      $rem-baseline: 72px;
      .demo{
        @include rem(width, 360px);
        @include rem(height, 360px);
      }
      
      base中计算方式如下:
      • html字体:1rem=640px/10=64px
      • viewport:scale = 1/dpr = 0.5
      • css的宽:360px/72px = 5rem
      • 5rem64px0.5 = 160px
  8. base sass源码请参考: 三水清博文

总结

简单的响应式设计其实也没那么复杂,直接按照标准来就行了,至于好不好看,代码好不好维护,那就得看个人的功底了。此外,有大量人员直接使用浮动来实现响应式布局,如果页面简单的话也没啥不妥吧。

参考

响应式网页设计-isux
移动前端开发之viewport的深入理解
css3-mediaqueries-w3c
用3个步骤实现响应式网页设计
移动适配-移动Web怎么做屏幕适配(一)

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式