首页 > 代码库 > min-width,min-height,overflow,移动端
min-width,min-height,overflow,移动端
1、有些时候我们是不知道中间内容区域有多高的,但又想让该区域的高度恰好能放下中间内容区域,这个时候我们可以使用min-height或者height: auto;
min-width会继承父元素的width,而min-height不会。
2、<div style="width:100%; height:20px; background:#f00; min-width:800px;"></div>
这个div是全屏的,浏览器不会产生滚动条,但是你把浏览器宽度缩小到800像素的时候,这个div不会再缩小,而浏览器就会产生滚动条
3、overflow
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
4、css部分:
body {
overflow-x: hidden;
overflow:inherit;
color: #333;
font-family: "微软雅黑",Helvetica,"黑体",Arial,Tahoma;
max-width:640px;
min-width:320px;
margin:0 auto;
position:relative;
background:#fff;
font-size:0.20rem ;
}
其他部分用rem做单位。例如:width:1rem;
html部分:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>医药人-web</title>
<!-- Bootstrap -->
<link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.mamicode.com/css/style.css">
<script type="text/javascript">
//html root的字体计算应该放在最前面,这样计算就不会有误差了/
//2016.3.23 wjq update 之所以要加个判断返回一个20.5,是因为当用户在谷歌等浏览器直接输入手机端网站网址时,如果用户设置模块自定义样式的高度比较小,由于这时候的clientWidth为1920px,及返回的_htmlFontSize为40,这时候就会使模块太小,展示不完全,因此先取一个较为准确的值去展示。Mobi.resetHtmlFontSize()顺便也加了
var _htmlFontSize = (function(){
var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
if(clientWidth > 640) clientWidth = 640;
document.documentElement.style.fontSize = clientWidth * 1/6.4+"px";
return clientWidth * 1/6.4;
})();
</script>
min-width,min-height,overflow,移动端
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。