首页 > 代码库 > 响应式布局
响应式布局
当今,中国网页一般都是分为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栏式。
响应式布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。