标签:
当今,中国网页一般都是分为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