移動Web開發與適配筆記

時間 2020-06-08

標籤移動 web 開發適配筆記欄目無線简体版

原文原文鏈接

項目要是適配手機端，想透徹的把相關內容弄清楚，如今總結一下。javascript

1、移動端開發有以下特色：css

一、跑在手機端的web 頁面就是h5頁面html

二、具備跨平臺性（web 安卓 iOS都適應）java

三、基於webview；一個組件能夠理解爲一個瀏覽器（給一個URL便可打開，並顯示）node

四、基於webkitwebpack

五、更高的適配性和性能要求git

2、常見的移動web適配方法：github

（1）PC端web

960px/1000px居中；
盒子模型，定寬，定高；
display:inline-block。

（2）移動webnpm

定高，寬度百分比；
flex；
Media Query(俗稱媒體查詢，和flex組合被稱爲響應式佈局)。

Media Query(媒體查詢)：

@media 媒體類型 and (媒體特性){ /*css形式*/ }

媒體類型：screen（屏幕），print（打印）;

媒體特性：max-width,max-height,min-width,min-height;

案例

@media screen and (max-width:320px){
.inner{
width:25%;
height:100px;
float:left;
}
}
@media screen and (min-width:321px){
.inner{
width:100%;
height:100px;
}
}
</style>
</head>

三 rem適配

1）rem原理

rem是一種字體單位，值根據html根元素大小而定；
適配原理是將px替換成rem，動態修改html的font-size。
基本覆蓋全部的手機系統
rem原理代碼分析

/*1rem=17px=html的fontsize（默認爲16px）*/
<style type="text/css">
html{font-size:17px;}
.box{
   width:10rem;
   height:10rem;
   background:red;    
    }
.text{
   color:#fff;    
   font-size:1rem;
    }

</style>
</head>

<body>
<div class="box">
   <p class="text">hello rem</p>
</div>
</body>

能夠結合media方法來實現不一樣機型下字體的大小在上面css中加入

@media screen and (max-width:360px)and (min-width:321px){
    html{font-size:20px;}
    }
@media screen and (max-width:320px){
    html{font-size:20px;}
    }

可是手機機型太多，不如用js方法動態設置

<script type="text/javascript">
   //動態獲取視窗寬度
    var htmlWidth=document.documentElement.clientWidth;
    console.log(htmlWidth);
    //獲取視窗高度
    var htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontsize=htmlWidth/10 + 'px';
</script>

若是頁面寬度是320px， htmlDom.style.fontsize=htmlWidth/10 + 'px'=32px;

那麼170px換算成rem就是 170/32

2）rem進階

rem基準值計算；（rem的基準值就是html的fontsize）1rem=16px=html的font-size
rem數值計算與構建 170px換算成rem 就是170/16 rem
rem與scss結合使用
rem適配實戰

 sass文件：
@function px2rem($px){
       $rem:37.5px;
       @return ($px/$rem)+rem;
}
.hello{
   width:px2rem(100px);
   height:px2rem(100px);
   &.b{
       width:px2rem(50px);
       height:px2rem(50px);
   }
}
css文件：
.hello{
   width:2.66667rem;height:2.66667rem;
}
.hello.b{width:1.3333rem;height:1.3333rem;}

rem適配頁面步驟：

1.頁面框架搭建（構建，sass）

2.頁面樣式步驟

3.rem計算代碼編寫

4.適配多種機型大小、resize完善。

步驟一：首先安裝好node和webpack，安裝成功的結果是輸入node-v，npm-v和webpack-v能出現相應的版本號。

步驟二：命令行進入項目的目錄，而後執行npm init，在項目中建立一個package.json文件；

步驟三：將課程中package.json文件裏面dependciess這部分代碼copy進去；

"dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2"
}

步驟四：運行命令npm install

步驟五：建立一個webpack.config.js文件，並進行配置。參考配置：https://github.com/CruxF/IMOOC/blob/master/HTML_CSS/WebMoblie/webpack.config.js

webpack和node簡單安裝使用：http://www.cnblogs.com/fengxiongZz/p/8075903.html

sass出入門：http://www.cnblogs.com/fengxiongZz/p/7789928.html

移動端h5--頁面適配：https://github.com/sunmaobin/sunmaobin.github.io/issues/28