首页 > 其他 > 详细

响应式布局

时间:2016-09-25 22:26:56      阅读:259      评论:0      收藏:0      [点我收藏+]

当今,中国网页一般都是分为APP和PC端来进行布局的,意思是写套网页。 在国外,一般都是写一套,自适应的网页。

今天,简单的介绍下,通过@media这种媒体查询,通过改变屏幕的宽度,从而来达到自适应的效果

和平时单独分开写网页有点不一样,这种自适应的网页,需要我们建立3个css文件,意思是要引用3个csswenjian .然后逐个调试。

在这其中,单位要特别注意,宽和高,使用%或者rem的单位。

在写网页的过程中,写一部分,在每个css文件中,进行调试。调试好了,再进入下一个框架。

PC端:@media screen and (min-width:1000px){}
平板端:@media screen and (min-width:768px) and  (max-width:999px){}
手机端:@media screen and (max-width:767px){}

3个css文件中,分别加上屏幕的大小。一般宽度的话,都是100%自适应的。

PC端采用3栏式,平板端,采用2栏式。手机端,采用1栏式。

 

响应式布局

原文:http://www.cnblogs.com/cswzl/p/5906949.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!