关于日常书写PC与移动端的响应式设计的方式

 

• 百分比进行响应式开发：

首先为什么要使用百分比来控制元素的宽高而不是固定宽度呢？固定网页布局指网站的内容被一个固定宽度的元素包裹，容器内的区块都有固定的百分比或者像素宽度值。最重要的一点，容器是不能移动的。不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容，而这个包裹着内容的容器并不能随着用户的窗口大小来进行自行的缩放，也就是说如果用户想要看到该网页的全部内容，就必须要将窗口调到开发者所固定的容器大小，所以在固定宽高这方面进行web开发的话，会严重的影响到用户体验。而使用百分比来进行布局的话呢，指无论用户的窗口怎样缩放，它一直都是按照用户的窗口来进行缩小或者放大，如果将用户的窗口宽高无论怎样变化的时候，始终都喂100%，如果我将一个容器的宽控制为30%，那么这个容器无论随着用户的窗口缩放他始终所占的宽度都是30%，不会出现看不见它内容的情况，从而实现响应式布局的开发，那么有利肯定就有弊，设计师对页面的显示效果并不好控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感，假如我在一些大的屏幕上来演示一个使用百分比来控制的网页，如果说我的内容不够足够的多的话，因为只有容器实现了百分比来控制，而里面的内容并不能够跟随你的容器的变化来进行变化，所以，会造成给人一个你的内容不够多的问题，而会显得你的页面过于空洞，不过尽管如此，如果在容器的内容编辑上进行一些小小的CSS样式控制的话，这些问题完全可以解决掉

 

• 响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

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

 

 

• 响应式图片

带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

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

解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。

 

关注我的微信公众号，会不定期的发布学习总结与学习资源