CSS - 响应式布局

最新推荐文章于 2022-05-06 11:46:11 发布

LSYHhhhh

最新推荐文章于 2022-05-06 11:46:11 发布

阅读量532

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_33961117/article/details/82868265

本文介绍了响应式布局的概念，它允许网页根据屏幕大小自动调整布局。以CSS为例，通过设置特定的触发宽度，可以实现不同设备上网页的适配，确保在任何尺寸的屏幕上都能提供良好的用户体验。

概念

随着网页大小的改变，而改变布局的响应方式。

例如：https://www.golaravel.com/

实现方式

- interger 设置触发宽度

网页小于<integer>设定宽度
@media only screen and (max-width: <integer>) {
    selector {
        
    }
}
网页宽度不位于<integer>设置宽度范围内
@media only screen and (min-width: <integer>) and (max-width: <integer>) {
    selector {
        
    }
}
网页大于<integer>设定宽度
@media only screen and (min-width: <integer>) {
    selector {
        
    }
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<

最低0.47元/天解锁文章

新学期VIP享超值加赠

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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