首页 > 编程学习 > 前端面试题总结(终极私人VIP版) 连更中......

1、 响应式布局如何实现

响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。
方案一:百分比布局
利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有 width、height、padding、margin,其他属性比如 border、font-size 不能用百分比设置的,先看一个简单例子:
顶部是利用设置图片 width: 50%来适应不同的分辨率,由于原始图片高度不同,所以第一张图片顶部会有空白,这种情况最好两张图片宽高保持一致,如果使用强制高度统一,会导致图片变形;
注意:当屏幕大于图片的宽度时,会进行拉伸;解决拉伸方法就是改为
max-width: 50%,但当屏幕大于图片的宽度时,两边会有空白。栏目是利用设置单栏目 width: 25%来适应不同的分辨率。
由于没办法对 font-size 进行百分比设置,所以用的最多就是对图片和大块布局进行百分比设置。
方案二:媒体查询 (CSS3 @media 查询)
利用媒体查询设置不同分辨率下的css 样式,来适配不同屏幕,先看一个简单例子:
三个不同分辨率下显示对应的背景色。
媒体查询相对于百分比布局,可以对布局进行更细致的调整,但需要在每个分辨率下面都写一套 css 样式


本文链接:https://www.ngui.cc/el/2883549.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000