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

標籤：瀏覽器   nts   繼承   device   class   margin   href   字型   rem   

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，是因為當使用者在Google等瀏覽器直接輸入手機端網站網址時，如果使用者佈建模組自訂樣式的高度比較小，由於這時候的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，移動端