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

首先来说一下为什么要尽量的去使用百分比进行布局而不是固定的宽高。要知道，当今手机移动端web是非常的火的，可以说现如今手机的日常使用频率在我们日常的生活中是占有很大一部分的，甚至并不比电脑的使用时间短到哪里去，我们都用它来做些什么呢，例如聊天、购物、搜索等，既然使用了，就必然会跟web开发扯上关系，再加之每个互联网公司都想要在手机端这个大块蛋糕上都能分到一块蛋糕，因此，响应式web的发展日趋成熟。

　　在如今的一些，前端开发手段里，使用最多的应该是使用bootstrap进行响应式web的开发，那么抛开使用框架的方式来进行代码的书写的话，我个人呢，基本上是使用以下3种方法来进行响应式的设计的。

　　1.尽量去使用百分比来进行样式宽度的控制，少用甚至不要去使用固定宽高。

　　2.使用css属性里面的媒体对象来进行元素的控制，例如：@media的媒体对象来进行控制，从而使元素可以适用于不同平台的页面加载。

　　3.使用弹性盒子来进行开发，实现响应式开发。

　　

　　那么接下来来一一分析一下以上三种方式的各种优缺点及具体的使用方式。

　　百分比进行响应式开发：

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

　　使用css的@media属性来进行响应式的开发：

　　这里我来书写一下样式的代码

@media screen and(max-width:300px;){　　　　　a:hover{　　　　　　background:red;　　　　　}　　}

这里代码的意思呢，指的是在当前窗口的最大宽度处于300px时，执行该标签内的所对应的样式，那么同样的，括号里面也可以写成min-最小值来进行相应的不同控制，也就是说，我可以在一个页面上进行多个布局效果来适应不同屏幕的大小，处于什么条件下我就执行什么样式，这样也可以实现响应式web的开发，但是不建议手写，因为手写的话，加入你需要实现多种大小的控制，那么你就需要来写很多套样式来不断的进行测试，所以@media标签的应用呢，建议大家多去使用bootstrap这个框架。

　　使用弹性盒子来进行开发：

　　弹性盒子呢我个人感觉它使用起来跟百分比区别不大，主要区别点就是在字体上以及盒子大小的控制单位一个是%，而另一个是em，并且弹性布局的尺寸主要根据字体大小而变化。这类设计根据用户浏览器中的字体大小来做出自动的调整，而且他的缺点跟使用百分比来进行布局大致上一样，但是后者的兼容性并不是太好，如果能够很好的解决它的各种兼容性问题的话呢，一样也是非常好用的一种方式。

 

　　那么今天呢，我的分享就暂时先到这里了，如果大家对我的看法有一些好的建议或者新的见解，欢迎大家能够踊跃评论，希望我们大家都能慢慢的进步，谢谢大家！