モバイル ページ remlayout_html/css_WEB-ITnose

一般的な携帯電話ページのデザインサイズは 640 ですが、携帯電話の画面サイズは実際には不確実です。このように、すべての携帯電話に適応する携帯電話ページを作成するにはどうすればよいでしょうか。
一般的なソリューションには、レム レイアウトとパーセンテージ レイアウトの 2 つがあります。私は両方の解決策を試したので、モバイル ページを作成するには rem レイアウトを使用することをお勧めします。

rem レイアウトの互換性: Mozilla Firefox 3.6 以降、Apple Safari 5 以降、Google Chrome、IE9 以降、Opera11 以降、ie6 ～ ie8 の方が優れています。 rem は使用しないでください
しかし、今日の携帯電話上の一般的なブラウザーでは、通常、IE カーネル ブラウザーは無視できます。

REMの計算式

例: html set font-size:16px 1rem = 16px その後、640px = 640/16 =40rem

個人的には計算しやすいように100pxに設定することをお勧めします

まず、htmlの100pxを定義しますページの

html{ font-size:100px;}/*基本 rem を設定します*/

その後、コア コードはこの js 操作であり、ページのサイズに応じて基本 rem の値を制御します。

すごいね

デモ

<; html >
<;頭＞
<; meta name ="viewport" content ="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
<;メタ文字セット ="utf-8" >
<; title >レム基础布局

新しい関数 (){
var _self = this;
_self.width = 640; // 設置默认最大宽度
_self.fontSize = 100; // 默认文字体大小
_self.widthProportion = function(){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1 ?1:p _self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px ! important") ;
}
_self.changePage();
window.addEventListener('resize', function(){_self.changePage();}, false);
};

/* === ベース スタイル=== */
*{ margin: 0px;  パディング: 0px;}
ul{ list-style: none;}
.wrap{ min-width: 320px;  最大幅: 640ピクセル;  幅: 100%;  マージン: 0px 自動; ; 背景: #2a6ace;  font-family: '微软雅黑', 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;  font-size: 12px;} /* ハンド机端用：字体大小用em，1em=16px; のため默认字体大小; 最大宽度640 */

.pro{ width: 6.2rem;  マージン: 0px 自動;  パディングトップ: 20px;  overflow: hidden;}
.clearfix:after { content: "";高さ: 0;表示ブロック;クリア: 両方;}
.clearfix { ズーム: 1;}
.pro ul{ 幅: 6.4rem;}
.pro li{ width: 3rem;  高さ: 3.6レム。  フロート: 左;  マージン: 0 0.2rem 0.2rem 0;}
.pro li .box{ width: 3rem;  高さ: 3レム。  背景: #ccc;}
.pro li p{ font-size: 0.24rem;  行の高さ: 0.6rem;  text-align: center;}




区块文案  
区块文案  
区块文案  
区块文案  
区块文案