SimpleZero

论如何简单高效的写响应式布局
先强行科普一波什么是响应式布局·咳~响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而...
扫描右侧二维码阅读全文
21
2018/02

论如何简单高效的写响应式布局

先强行科普一波什么是响应式布局·咳~
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端 而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

**根据维基百科及其参考文献,理论上,响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”,翻译成中文便是“如果将屏幕看作容器,那么内容就像水一样”。
**

响应式布局有什么优缺点?

优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
为什么要设计响应式界面
为何按老办法为主流设计特殊版本呢?为什么要费神地尝试统一所有设备呢?
即便是PC或Mac用户,有查显示只有一半的人会将浏览器全屏显示,而剩下的一般人使用多大的浏览器,很难预知;
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加,“主流设备”的概念正在消失;
屏幕分辨率正飞速发展,同一张图片在不同设备上看起来,大小可能天差地别。
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

响应式界面的四个层次
1、同一页面在不同大小和比例上看起来都应该是舒适的;
2、同一页面在不同分辨率上看起来都应该是合理的;
4、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;
5、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。

响应式代码该如何去写?
举个栗子:

@media screen and (max-width: 980px) {CSS demo}

上面这行代码的意思是如果当前设备的最大分辨率宽度不超过980px时执行大括号内的CSS代码
再举个栗子:

@media screen and (min-width: 1600px) {CSS demo}

同理,这行代码的意思是如果当前设备的分辨率宽度不低于1600px时执行大括号内的CSS代码
上面代码这么看来确实是挺简单的,那么混合式应用该如何去写呢?
接着举个栗子:

@media screen and (min-width: 1366px) and (max-width: 1920px){CSS demo}

当分辨率大于1366px且小于1920px时执行大括号内的css样式
如果上面两行代码理解了的话那这行代码肯定就不用解释了,毕竟还是非常简单的
只要灵活运用的话写出来的效果还是非常不错的

最后修改:2018 年 11 月 28 日 09 : 50 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

13 条评论

  1. Jrotty
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)

    有空试试vw和vh单位,很有魔性的(。•ˇ‸ˇ•。)⌇●﹏●⌇

    1. SimpleZero
        Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
      @Jrotty

      有空试试

  2. 月宅
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)

    ,里面有段代码是我提出的,网上都没有...你这直接复制的...暴力

  3. 月宅
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)

    似曾相识

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
      @月宅

      前几天不知道水些啥,然后看到你的文章,然后又刚好在写魔改主题的响应式2333,于是就度娘和知乎上找了些东西水水

  4. Cutknife。
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 53.0.2785.104(Google Chrome 53.0.2785.104)

    老哥你有的表情失效了

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
      @Cutknife。

      没有啊,你强制刷新试试

    2. Cutknife。
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 53.0.2785.104(Google Chrome 53.0.2785.104)
      @Cutknife。

      好像是我网卡了,破玩意

      1. SimpleZero
          Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
  5. heroyf
      Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.119(Google Chrome 64.0.3282.119)

    摸摸博主

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
      @heroyf

      测试

  6. AH丶
      Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 49.0.2623.87(Google Chrome 49.0.2623.87)

    沙发

    1. SimpleZero
        Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
      @AH丶

      板凳