首页 > 代码库 > 响应式布局

响应式布局

当今,中国网页一般都是分为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栏式。

 

响应式布局