min-width,min-height，overflow，移动端

Posted 2020-09-09 liu-hui

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="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="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>