响应式布局的五种实现方法
发布日期:2021-06-30 15:09:54
浏览次数:3
分类:技术文章
本文共 994 字,大约阅读时间需要 3 分钟。
响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。
方案一:百分比布局
利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有 width、height、padding、margin,其他属性比如 border、font-size 不能用百分比设置的,先看一个简单例子:
顶部是利用设置图片 width: 50%来适应不同的分辨率,由于原始图片高度不同,所以第一张图片顶部会有空白,这种情况最好两张图片宽高保持一致,如果使用强制高度统一,会导致图片变形; 注意:当屏幕大于图片的宽度时,会进行拉伸;解决拉伸方法就是改为 max-width: 50%,但当屏幕大于图片的宽度时,两边会有空白。栏目是利用设置单栏目 width: 25%来适应不同的分辨率。 由于没办法对 font-size 进行百分比设置,所以用的最多就是对图片和大块布局进行百分比设置。方案二:使用媒体查询 (CSS3 @media 查询)
利用媒体查询设置不同分辨率下的css 样式,来适配不同屏幕,先看一个简单例子:
三个不同分辨率下显示对应的背景色。 媒体查询相对于百分比布局,可以对布局进行更细致的调整,但需要在每个分辨率下面都写一套 css 样式;分辨率拆分可视项目具体情况而定。注意:IE6、7、8 不支持媒体查询。
方案三.rem 响应式布局
当前页面中元素的rem 单位的样式值都是针对于html 元素的font-size 的值进行动态计算的,所以有两种方法可以达到适配不同屏幕:
第一种利用媒体查询,在不同分辨率下给 html 的 font-size 赋值。第二种利用 js 动态计算赋值,详细代码如下图:缺点就是打开页面时候,元素大小会有一个变化过程。
方案四.vw 响应式布局
根据 PSD 文件宽度或高度作为标准,元素单位 px 转换为 vw 或 vh,比如font-size: 12px,PSD 文件宽度 375,转换公式 12 * 100 / 375,则样式改为font-size: 3.2vw,下面是我经常使用的工具,有利于提高转换效率。
现阶段手机端用的最多就是这个方法,能保持不同屏幕下元素显示效果一致, 也不用写多套样式。方案五.flex 弹性盒子布局
利用 flex 属性来适配不同屏幕,下图利用简单的属性实现栏目响应式
转载地址:https://jiangwenxin.blog.csdn.net/article/details/107143221 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月20日 21时50分49秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
libuv实现ping包发送和接收
2019-04-30
基础架构系列篇-系统centos7安装docker+COMPOSE
2019-04-30
基础架构系列篇-NGINX部署VUE
2019-04-30
基础架构系列篇-系统centos7安装kafka
2019-04-30
基础架构系列篇-系统centos7中docker安装分布式文件存储服务minio
2019-04-30
软件质量的8个特性
2019-04-30
应届渣渣前端的艰难求职之路
2019-04-30
2021年不可错过的17种JS优化技巧(一)
2019-04-30
在 Vue 中用 Axios 异步请求API
2019-04-30
MySQL进阶查询(SELECT 语句高级用法)
2019-04-30
Mysql 之主从复制
2019-04-30
【NLP学习笔记】中文分词(Word Segmentation,WS)
2019-04-30
【超越白皮书7】你需要知道关于ETH2.0的几个事实
2019-04-30
对于时间复杂度的通俗理解
2019-04-30
如何输入多组数据并输出每组数据的和?
2019-04-30
行阶梯型矩阵
2019-04-30
MATLAB指定路径保存图片方法
2019-04-30
JAVA学习笔记6 - 数组
2019-04-30
JAVA学习笔记10 - 继承
2019-04-30
Android 开发学习笔记 00 - Getting Started
2019-04-30