码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局

时间:2016-09-25 22:27:42      阅读:199      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!