响应式布局中min-width与max-width的使用

本文部分参考于奈良鹿手稿

https://www.cnblogs.com/lozio/archive/2015/07/26/4677738.html


响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

媒体查询

为了能完成响应一定会用到媒体查询

媒体查询是CSS3新语法

  • 使用媒体查询,可以针对不同的媒体类型定义不同的样式
  • 可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多手机、平板等设备都用到的媒体查询

max-width与min-width

单独把这俩属性拎出来,没什么可说的,就是字面上的意思。
max-width:设置元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此,元素可以比指定值窄,但不能比起宽。
min-width:设置元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。不允许指定负值。

  • @media(min-width:330px){…}
    指的是 width大于或等于min-width时,采用{…}样式。
    能直接转过弯来的,下面不用看了,可以退出,干点别的了。

没转过弯来的,也不要紧。接着往下看。

先返回上面,看min-width的解释:设置元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。
也就是说我的值可以比你大,但不能比你小。
所以这处理过程翻译过来就是:视口为340px时,大于330px,这条规则为true,执行CSS样式;而如果为320px,小于330px,这条规则为false,返回false的媒体查询规则会直接被浏览器过滤掉,不会渲染这条规则中的CSS样式

同理:@media(max-width:330px){…}
指的是width小于等于max-width时,采用{…}样式

所以,需要在width大于1280px时,采取{…}样式时,应该这样
@medai{min-width:1280px}{…}

### 回答1: min-widthmax-widthCSS的两个属性,分别用于设置元素的最小宽度和最大宽度。min-width属性用于设置元素的最小宽度,即使元素的内容更小,元素的宽度也不会小于此值。max-width属性用于设置元素的最大宽度,即使元素的内容更大,元素的宽度也不会大于此值。 ### 回答2: min-widthmax-width都是CSS常用的属性,用于定义元素的最小宽度和最大宽度。 min-width属性用于指定元素的最小宽度。当元素的内容宽度小于指定的最小宽度时,元素会自动扩展以容纳其内容。如果设置了一个固定宽度,同时又设置了min-width,当内容超过该宽度时,元素会自动扩展到指定的最小宽度。这在设置响应式设计时非常有用,可以避免在窗口缩小时出现滚动条。 max-width属性则用于指定元素的最大宽度。当元素的内容宽度超过指定的最大宽度时,元素会自动压缩到指定宽度以适应其容器。这在控制图像的大小时非常有用。一般情况下,如果不设置元素的宽度,当浏览器调整大小时,元素的宽度会随着窗口的大小而变化,不一定合适。所以,在这种情况下,为元素设置max-width属性,当窗口缩小到一定程度时,元素的宽度就会自动缩小到最大宽度为止。 当使用min-widthmax-width时,需要注意它们仅适用于块容器。如果应用到行内元素,则不会起作用。同时,需要注意设置min-width时,最好同时设置宽度,否则宽度可能会无限扩展。设置max-width时,需要注意元素的最小宽度不能超过最大宽度,否则max-width会被覆盖。 ### 回答3: min-widthmax-widthCSS常用的两个属性之一,通常用来设置元素的最小宽度和最大宽度。 min-width用于限制元素的最小宽度,当元素的宽度小于指定的最小宽度时,该元素的宽度会自动扩展。这个属性常用来保证元素的显示效果,在不同的设备上表现一致。例如,如果一个容器内有两个子元素,一个宽度为200px,另一个宽度为50%,则在较小的设备上显示可能会导致子元素叠加在一起,这时可以使用min-width属性设置一个最小宽度,确保两个子元素不会重叠。另外,min-width也可以用于设置响应式布局,并根据视口的大小自动调整元素的宽度。 max-width则用于限制元素的最大宽度,当元素的宽度超出指定的最大宽度时,该元素的宽度会被自动缩小。这个属性常用于防止元素过大,影响用户体验,例如,防止图像或视频文件过大显示不全或占用用户过多的带宽。类似min-widthmax-width也可以用于响应式布局,以确保在大屏幕上元素不会过大,在小屏幕上也不会太小。 总的来说,min-widthmax-widthCSS布局非常重要的两个属性,它们可以确保元素在不同设备和屏幕大小下始终保持良好的显示效果,提高用户体验。同时,也可以结合其他的CSS属性和技巧,创建更加复杂的响应式布局和动态效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值