Bootstrap-媒体查询-屏幕大小

本文介绍了一种使用CSS实现响应式布局的方法,通过不同媒体查询设置超大PC、中等PC、PAD及PHONE屏幕下的样式,确保了良好的跨设备兼容性和用户体验。

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

 1 .container{padding:0 15px; margin:0 auto;}
 2 .container:before{
 3     content: '';
 4     display: table;/*防止第一个子元素margin-top越界*/
 5     }
 6 .container:after{
 7     content:"";
 8     display:table;/*防止最后個子元素margin-bottom越界*/
 9     clear:both;/*清楚子元素浮动的影响*/
10 }
11 
12 /*超大PC屏幕下的专用样式*/
13 @media screen and (min-width:1200px) {
14     .container{ width:1170px;}
15     .my-img{width:25%}
16 }
17 /*中等PC屏幕下的专用样式*/
18 @media screen and (min-width:992px) and (max-width: 1199px) {
19     .container{width:970px;}
20     .my-img{width:25%}
21 }
22 /*PAD屏幕下的专用样式*/
23 @media screen and (min-width: 768px) and (max-width:991px ){
24     .container{width:750px;}
25     .my-img{width:50%}
26 }
27 /*PHONE屏幕下的专用样式*/
28 @media screen and (min-width:767px) {
29     .container{ width:100%;}
30     .my-img{  width:100%;}
31 }

 

转载于:https://www.cnblogs.com/longly/p/6090917.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值