建站百科

文章导读：本文主要阐述了“盘点跨屏响应式设计的4大要素”相信很多人都还记得，前几年用手机上网的时候，打开网站常常是一堆内容叠在一起，放大、移动、拉伸操作繁琐，浏览体验极差。假如...，本文由跨屏网最后更新于2020-07-31，全文共2161个字，预计阅读时长7分12秒。

而响应式设计很好的解决了这个问题，以下跨屏科技就来盘点跨屏响应式设计的4大要素：

1、突变点(break point)考虑

突变点即临界点，也就是响应式页面要适配的屏幕尺寸。已有的css框架（bootstrap,pure grid, foundation, skeleton, golden grid system等）都内置有突变点，但是对各种屏幕的适配又不尽相同，常用的Grid 框架中各个突变点定义如下：

小屏：0-479px

中屏：480px-959px

大屏：960px-1399px

超大屏：1400px以上

突变点没有具体的规范约束的，只能根据具体的业务去指定比较合适的临界值。

如果在某个业务系统中以及定义了具体的break point，该怎么使用这些break point呢，接下来就是我们需要解释的media query-媒体查询。

2、媒体查询

媒体查询是在css3中引入的模块，2001年第一次发布为工作草稿，2012年6月被W3C作为推荐标准，随后各大浏览器纷纷添加支持。其允许根据设备的屏幕分辨率显示不同的效果-这个是媒体查询的基石（cornerstone）。不过比较遗憾的是IE8及其以下的版本并不支持媒体查询，需要给这些顽固的势力加个shim,到现在为止有很多这样的垫片可以用，如：modernizr,css3-mediaqueries.js,respond.js等。

下面看下具体的场景和用法：

（1）link中使用media

这种情况，无论样式表中的规则是否匹配到，都会下载该css文件。

（2）css中定义media query

@media screen and (min-width:700px){}  //屏幕最小宽度为700px时应用此样式

@media print and (min-width:700px){}  //打印最小宽度为700px时应用此样式

@media (min-width:700px) and (orientation:landscape){}//最小宽度为700px且为水平,portrait

@media screen and (device-width<700px){}  //屏幕宽度小于700px时

@media (device-aspect-ratio:16/9){} //屏幕比例

@media screen and (device-width<700px) and (-webkit-device-pixel-ratio：2){} //像素比为2

3、导航设计

在pc端导航通常设计为横向或者竖向，便于鼠标操作。而在移动端或者小屏上，效果就大不同了，特别是移动端，传统的菜单很容易给用户造成误操作，比如说误点（虽然可以使用间隔8像素处理，但是效果较差）、菜单项分行显示。所以在小屏和移动端，菜单通常采用汉堡导航的风格设计。

另：几个较好的导航设计

http://zurb.com/building-blocks/multi-level-accordion-navigation

http://zurb.com/quips

https://tympanus.net/Blueprints/FullWidthTabs/

https://formstone.it/components/navigation/

4、图片设计

图片是直观的表达工具，在现在的web设计中，图片已经占了内容的近62%，而且每天还在制造更多。如果所有图片内容都能被好好利用那的确是很赞的。但是对小屏或低分辨率低设备来说，其中大部份数据都被浪费掉了。

响应式图片是指：用户代理根据输出设备的分辨率不同加载不同的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能加载对应大小的图片

第一种方法：srcset属性

屏幕宽度为1-480px时显示图片small_480.jpg

屏幕宽度为481px-768px时显示图片standard_480.jpg

屏幕宽度为769px-1024px时显示图片large_1024.jpg

当然也可以根据像素比设置图片，比如mac的屏幕的像素比为2，那么就可以设置srcset=”large_1024.jpg 2x” 。

这种解决方案让人感觉不可思议，但是使用时得仔细确保为正确的设备提供了优化后的图片。srcset属性得到多数浏览器的支持，但是对IE来说却始终显得那么的不合群，为了让IE支持该属性可以通过polyfill(https://github.com/borismus/srcset-polyfill)来使用srcset并完成兼容问题。

第二种方法：picture元素

写在最后，以上就是对于“盘点跨屏响应式设计的4大要素”的一些看法，欢迎指正、交流。

新闻名称：盘点跨屏响应式设计的4大要素
地址分享：http://test.kuaping.com/article/show359.html