响应式布局

Posted 2020-08-10 晨曦橙

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