响应式布局如何实现

本文介绍了响应式布局的重要性,以及实现响应式布局的五种方法:百分比布局、媒体查询、rem布局、vw布局和flex弹性布局。百分比布局适用于简单布局,媒体查询提供细致调整,rem布局通过动态计算实现,vw布局简化跨设备样式,而flex布局则提供了强大的灵活性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

响应式布局如何实现

1为什么要使用响应式布局

响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好
的体验。

2如何实现

方案一:百分比布局

利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有width,、height、padding、margin,其他属性比如border、 font-size不能用百分比来设置的
由于没办法对font-size进行百分比设置,所以用的最多就是对图片和大块布局进行百分比设置。

方案二:使用媒体查询 (CSS3@media 查询)

利用媒体查询设置不同分辨率下的css样式,来适配不同屏幕。
媒体查询相对于百分比布局,可以对布局进行更细致的调整,但需要在每个分辨率下面都写一套css样式。
该布局的话适用于简单的网页,可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护,bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了(如:淘宝,京东)等等

方案三.rem 响应式布局

rem布局的原理

rem:相对于根元素(即html元素)font-size计算值的倍数。
如 html的font-size为100px;那么2rem就为200px。
通俗的来讲的话rem就是通过JavaScript来获取页面的宽度,从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
//代码展示

<script>
     function rem(){
         document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+'px'
     }
    rem()
    window.onresize = rem
</script>

上述代码中 7.5为动态的值,根据设计图的宽度进行动态的改变。window.onresize的作用是:当页面的宽度或高度发生改变时,再次进行调用rem函数。

方案四.vw 响应式布局

vm,vh相应式布局通俗来讲就是有一点类似百分比布局 将页面的宽和高分别分为100份 1vm就是为宽度的百分之一,同理1vh及为高度的百分之一。段手机端用的最多就是这个方法,能保持不同屏幕下元素显示效果一致,也不用写多套样式。

方案五.flex 弹性布局

flex就是利用css3中的弹性盒子向下兼容到IE10
利用flex属性来适配不同屏幕, 该方法一般都会结合rem布局来写移动端页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值