我们在做布局设计时,经常有这样的布局,两边或者一边是导航类工具栏 ,中间是内容区域。
但我们希望中间的内区域能够自动适应,随着不同的分辨率和浏览器的大小自动适应高度和宽度,以获得较好的显示效果。
我们假设中间的内容区域是个div,如果我们不明确设置它样式的width属性,它是可以自动适应的,按说这满足了要求。
但是当浏览器的宽度过小时,小到已经不能整齐的显示我们的内容,页面的显示就会混乱不堪。
这时我们可以为该内容div设置一个min-width,比如在css中:
#content{
min-width:600px;
}
这个属性的功能就像它的名字一样简单:最小宽度。该div还是自动适应宽度,但它多了个条件,当它自适应的宽度小于设置的最小宽度时,就会把该div的宽度设置为最小宽度,不再自动适应。
这个属性在firefox和ie7中是可以使用的,但在ie6中不支持,我们可以用下面这段代码代替:
#content{
_width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');
}
前面的这段:
((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700
只是个判定条件,判定页面body的宽度,这里的是,如果页面body的宽度小于700(这个要根据具体的页面来指定),就把content的宽度指定为600,否则就让它自适应宽度。
其实min-height也同理!
分享到:
相关推荐
一、基本含义min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。min-width 的值会同时覆盖 max-width 和 width。 二、可取值常用百分比、固定px|em|ex等,其他属性值如max-...
min-width与min-height在css中是相当好用的语法,可以让HTML元素最少仍保持一定的宽和高,而需要时仍随着元素的內容增加宽和高。
说明:让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性 代码如下: @if (@_win32 && @_jscript_version>4) var minmax_elements; minmax_props= new Array( new Array(‘min-width’, ‘minWidth’), new ...
虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现,不过支持此属性的浏览器使用比率都不高,比如Firefox。
min-width-768px . max-width-991px . foo { float : left; } 用法 postcss ( [ require ( 'postcss-mqwidth-to-class' ) ] ) 有关您的环境的示例,请参见文档。 笔记 仅支持px单位。 忽略查询中的其他任何内容...
postcss-media-minmax, 编写简单而优雅的媒体查询 ! PostCSS媒体 Minmax 编写简单而优雅的媒体查询 !媒体查询的min-width 。max-width 和许多其他属性非常混乱。 我每次看到它们时都想哭。 但是现在根据新规范,你...
我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法。以下为CSS 宽度之IE6支持...
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...
@media它允许您从 CSS 中提取所有规则,并将它们作为单独的文件发出,您可以将这些文件link rel=\\stylesheet\\ media=\\screen and (min-width 1024px)\\ href=\\desktop.css\\作为动态导入加载。 前 例子.css .foo...
height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-...
首先我们知道这个效果应该是一个老话题了。今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧 需要说明的是有幸也见到过CSSPLAY的老工程师站长对这...}#min-width{ min-width:9
@media screen and ( min-width : 5 em ) { . root { color : green; } } . root { color : red; @media screen and ( min-width : 5 em ) { color : green; } } 用法 postcss ( [ require ( 'postcss-nest-...
1、IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: 复制代码代码如下: .className { max-width:1000px; _width:[removed](document.documentElement.clientWidth||document.body.clientWidth)<1000?...
PostCSS排序媒体查询 插件,用于使用移动设备优先或桌面优先方法对CSS媒体查询进行合并和排序。 将相同的媒体查询合并为一个-这是该插件的...@media screen and ( min-width : 1280 px ) { . mobile-first { color
<link href="assets/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/css/font-awesome.min.css" /> <!--[if IE 7]> <link rel="stylesheet" href="assets/css/font-...
sm : 'screen and (min-width: 30em)', med : 'screen and (min-width: 48em)', lrg : 'screen and (min-width: 64em)', xlrg: 'screen and (min-width: 75em)' } })).toString()...