响应式网页设计

2018-02-26 17:00:52
背景

移动端入口:当用户希望通过手机来完成PC页的操作时,常见的是商家的运营微博,期文案足够吸引用户点击链接参加活动,如果该活动页没做响应式处理:页面体积大、请求多、体验差、兼容性差,层层阻碍最终导致用户放弃参加。

开发成本低,门槛低

变块元素,并绑定对应列名,然后用伪元素的content:attr(data-th)实现 
  • 跨平台和终端且不需要分配子域

     

    Web App可以利用本地存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。

    更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

    首先我们应该遵循移动优先原则,交互&设计应以移动端为主,PC则作为移动端的一个扩展;
    一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:

    1. 响应式布局

      那么我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:

      Meta标签定义

       

       

      隐藏状态栏

      iPhone会将看起来像电话号码的数字添加电话连接,应当关闭

      使用 Media Queries 适配对应样式

      设备类型(media type):

      设备特性(media feature):

      example:

      
      3 	selector ...
      
      
      3 	selector ...
      
      
      3 	selector ...
      

      隐藏不重要数据列

      以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。

      实现方法:

       

      固定首列,剩余列横向滚动

      栅格框架推荐

      • 响应式图片

        处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

        是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:

        source: 一个图片源;media: 媒体查询,用于适配屏幕尺寸;srcset: 图片链接,1x适应普通屏,2x适应高清屏;

        当然,在未来的 CSS Image Level 4 中已经实现了响应式图片的原生语法:image-set

         

        当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探 以下是部分项目地址,感兴趣的可以了解下:

        • 高分辨率(DPI)下的响应式处理
          1. JS检测:var retina = window.devicePixelRatio > 1;

            高DPI媒体查询规则将在下一篇文章中做详解,敬请期待

            由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个不错的解决方案

             

             

            • 响应式不只是技术的实现,它更像是一种对于设计的全新思维模式

            •  
            • 浏览的体验短期内还无法超越原生应用

            •  
            • 左手操作习惯的交互

            •  
            • Webapp的消息推送

            •  
            • 调用本地文件系统的能力弱

            •  
            • 响应式图片的解决方案

            •  
            • 对PC事件的兼容

            •  
            • WebAPP页面体积的响应式适配

            •  
            • 代码实现和内容可维护性之间的权衡

            •  
            • 控制设计开发成本

            •  

             

            • 点击区域不限于元素的视觉区域,便于用户点击。同时排版不受限制,可以达到原生App的视觉效果。

            •  
            • 气泡框可以减少页面跳转,适合消息提醒等微任务的处理。

            •  
            • 信息架构上越来越接近原生App,有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。

            •  
            • 识别更多的手势操作,如下拉刷新和右滑存档等平移手势。操作不必全部呈现在界面中,和平台操作保证一致。

            •  
            • 调用系统硬件,如重力感应等传感器、多媒体设备,不过在手机端还鲜有应用案例,离大规模应用还有一定的距离。

            •  
            •  
            •