移動端開發學習

時間  2019-11-20
標籤 移動 開發 學習 欄目 無線 简体版
原文   原文鏈接

移動端基礎概念javascript

▪ 作移動端（wap）和作PC端區別：css

一、系統      PC：Windows/mac區別不大 ；  移動端：ios/android/windows有區別html

二、瀏覽器   PC：區別很大   ； 移動端：區別不大java

三、分辨率（尺寸）    PC：有區別      ； 移動端：區別很大android

調試方法：可在谷歌瀏覽器的手機模式下查看，可是始終與真機效果有差異，因此還可在sublime裏真機測試，不過這裏有一個更方便的辦法，可將作好的demo地址放入二維碼生成器中，生成二維碼，手機掃描便可。PS：如何將作好的demo生成二維碼？得到本機電腦的ipv4地址（windows+r,輸入cmd，進入系統運行界面，ipconfig），再替換到demo地址，進入二維碼生成器。ios

 

▪ 設備獨立像素：屏幕的大小、屏幕的尺寸（別名叫作點points，是個單位），獲取window.screen.width/window.screen.heightcss3

注意：一、橫豎屏切換時，真機裏的這個值不會改變，但在模擬器裏會切換web

      二、在一個點裏，能夠放下多個像素windows

      三、這個值能夠經過縮放改變瀏覽器

▪ 設備像素（物理像素）：屏幕的分辨率（實際放的像素值），買手機時廠家告訴你的分辨率，這個值是虛擬的，沒法獲取

▪ 像素比（DPR，這個值沒法改變），縮放的比例=設備像素/設備獨立像素，獲取window.devicePixelRatio

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions，可在該網址瞭解細節

▪ viewport 視口（可視區窗口），經過meta標籤設置

未設置時

一、屏幕的高度通常爲980，可是不一樣型號設備相應不一樣

二、真機與模擬器的值也會不一樣

三、用window.innerWidth/window.innerHeight方法獲取

設置後

Content:視口的相關設置

Width：屏幕的寬度，通常不設置成肯定數值，安卓設備有些不支持   device-width:設備的實際寬度  height同理

User-scalable:可否縮放   yes-容許縮放  no-不容許縮放

Initial-scale:初始比例（要與最小比例保持一致） maximum-scale:最大可以縮放的比例  minium-scale:最小可以縮放的比例

一、若設置縮放的話，就把width與user-scalable去掉

二、用了縮放後，並非真正地縮放了，而是改變了設備的獨立像素（屏幕的尺寸）

 

移動端適配方案

 

▪ 適配：在不一樣尺寸的手機設備上，頁面相對性的達到合理的展現（自適應）或者保持必定效果的等比縮放（看起來差很少）

 

適配的元素：一、字體    二、寬高   三、間距   四、圖像（圖片、圖標）這個比較難

 

適配的方法：一、百分比適配   二、比例縮放適配   三、viewport適配    四、rem適配  五、彈性佈局適配

 

▪ 百分比佈局問題（通常狀況下，百分比佈局配合其餘適配方式使用）：

 

一、百分比的值很差計算

 

二、須要肯定父級元素的大小，由於要根據父級元素的大小進行計算

 

三、寬度能夠設置，可是高度很差設置

 

▪ 比例縮放適配：把全部機型的設備設置成一致的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

          <!--切記必定要寫移動端優先-->
          <meta name="viewport" content="width=device-width,user-scalable=no"/>

        <title></title>
        <style type="text/css">
            body{
                margin:0px; } div{ width:25%; height:500px; float:left; } div:nth-child(1){ background:red; } div:nth-child(2){ background:green; } div:nth-child(3){ background:blue; } div:nth-child(4){ background:pink; } </style> <script type="text/javascript"> (function(){ var curWidth=window.screen.width; var targetWidth=375; // 計算縮放比 var scale=curWidth/targetWidth; // 動態建立meta元素 var meta=document.createElement("meta"); meta.name="viewport"; meta.content="'initial-scale='+scale+',minimun-scale='+scale+',maximum-scale='+scale"; // 將建立好的meta標籤插入頭部  document.head.appendChild(meta); })(); </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>

 

 

一、viewport須要經過js動態的設置（不能直接把device設置成數值）

 

二、經過設置比例（初始比例和縮放比例的），把寬度縮放成

 

一致的

 

注意：viewport裏給了縮放之後的值後，最終的頁面的寬度是拿來的值除以縮放比例

 

缺點：全部的手機將會看上去是一樣大小，沒有分別，用戶體驗很是很差；有時會算出小數，致使有一些偏差（可有可無）

 

▪  viewport適配跟比例縮放適配類似，看下面的代碼

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <!--切記必定要寫移動端優先-->

          <meta name="viewport" content="width=device-width,user-scalable=no"/>

          <title></title>

          <style type="text/css">

 body{ margin:0px; } div{ width:25%; height:500px; float:left; } div:nth-child(1){ background:red; } div:nth-child(2){ background:green; } div:nth-child(3){ background:blue; } div:nth-child(4){ background:pink; } </style> <script type="text/javascript"> (function(){ /* * 320/scale=640 * scale=320/640(設備獨立像素/設備像素)=1/2 * scale=414/1242=1/3 */ // 計算縮放比 var scale=1/window.devicePixelRatio; // 動態建立meta元素 var meta=document.createElement("meta"); meta.name="viewport"; meta.content="'initial-scale='+scale+',minimun-scale='+scale+',maximum-scale='+scale"; // 將建立好的meta標籤插入頭部  document.head.appendChild(meta); })(); </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>

 

 

 

▪ rem： css3新增的一個相對單位，相對於根節點（html）字體的大小的值

Html{font-size=10px}  2em=20px

經過它能夠作到只修改根元素的大小，能成比例地調整全部字體大小，只依賴html字體的大小，在移動端開發裏經常使用。

靜態設置rem:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

          <!--切記必定要寫移動端優先-->
          <meta name="viewport" content="width=device-width,user-scalable=no"/>

        <title></title>
        <style type="text/css">
            body{
                margin:0; } div{ width:4rem; height:4rem; background:yellow; float:left; } section{ width:16rem; height:4rem; background:pink; /*在元素佐佑兩側均不容許浮動*/ clear:both; } p{ width:2.35rem;/*47px*/ height:2.35rem; background:gray; clear:both; } </style> <script type="text/javascript"> window.onload=function(){ // 獲取html var html=document.documentElement; // 獲取整個界面寬度 var width=window.screen.width; // 在控制檯輸出  console.log(width); // 設置根節點字體大小,將屏幕均分紅16份，關於被除數，只要以基準換算出來是整數均可以  html.style.fontSize=width/16+"px"; // iphone5下,1rem=320/16=20px  } </script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <section></section> <p></p> </body> </html>

 

動態設置rem，方法有二

一、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--切記必定要寫移動端優先-->
        <meta name="viewport" content="width=device-width,user-scalable=no"/>
        <link rel="stylesheet" type="text/css" href="rem.css"/>
        <title></title>
        <script type="text/javascript">
            window.onload=function(){ var html=document.documentElement; var width=window.screen.width; // 要有單位px  html.style.fontSize=width/15+"px";  } </script> </head> <body> <div>1</div> <div>2</div> </body> </html>

建立一個less文件：

//結尾有冒號
@rem:25rem;

body{
    margin:0px;
}
div:nth-child(1){
//  只是數值，沒有單位了
    width:187/@rem;
    height:100/@rem;
    background:red;
}
//寫好之後右鍵，選擇編譯，就會編譯出一個同名的css文件，沒修改一些就要編譯一次，css文件裏會出現算好的rem值

編譯後造成css文件

div:nth-child(1) {
  width: 7.48rem;
  height: 4rem;
  background: red;
}

二、利用HBuilder自帶的px轉換成rem的功能

點擊工具，再選擇選項，單擊左側的HBuilder，就會彈出下面的窗口，打開px轉rem功能，設置相關參數，就能夠直接在css裏設置了，此時輸入px值會自動換成rem值

 

一、必須動態地區設置html的大小，才能適配

 

二、根據頁面（注意：是psd圖，也就是真實大小）的寬度除以一個係數，把算出類的這個值賦值給html的font-Size屬性

 

特色：一、全部有單位的屬性會根據屏幕的尺寸自動加算

 

      二、一樣的一個元素，在不一樣設備下的大小是不同的，在尺寸小的設備下顯示的小，反之，大

 

      三、通常以iphone6爲基準，以它的寬度750除上一個係數，再去計算rem

 

爲何要除以一個數字呢？給你一大屏思考！

 

一、一個頁面裏，不可能所有都是整屏的元素，確定有一行放多個的元素，因此就把一行等分紅n份

 

二、不除以一個數字的話，那1個rem就是一整個屏幕的寬度了，這個值太大，若是元素的寬度比它小的話，不容易計算

 

三、這個係數能夠本身定，建議給一個能整除的值

 

▪ vw：相對於視口的寬度，視口被均分爲100單位的vw

h1 {font-size: 8vw;}

若是視口的寬度是200mm，那麼上述代碼中h1元素的字號將爲16mm，即(8x200)/100

▪ px：絕對單位，給多少是多少，不會變，作不到適配，在移動端開發裏不多用

▪ em：相對單位，相對於自身字體大小的值

Font-size:12px;   1em=12px

問題：一、chrom下有最小字體限制，必須爲12px，因此這個值不能小於12

           二、若是有兩個同樣的元素，可是裏面的字體不同，那就不能統一設置了，或者元素字體變化了，就又要統一設置一遍

 

 

▪ 移動端一些問題

 

一、固定定位問題

 

   固定定位在移動端的兼容性不是很好，之前老版本的某些安卓手機不支持，ios4之前的版本也不支持

 

   qq瀏覽器下有時候網上滑動的話，就會隱藏掉header

 

   當打開鍵盤時，固定定位會失效

 

二、body下的overflow問題

 

   body加了overflow:hidden後，橫向沒效果（ios），安卓下沒問題

 

▪ 移動端的樣式重置

 

一、鏈接點擊時候，默認有一個背景

 

-webkit-tap-highlight-color:rgba(0,0,0,0);

 

二、按鈕在ios下都是圓角

 

-webkit-appearance:none;  //清除輸入框和按鈕的默認外觀

 

Border-radius:0;

 

三、每臺設備裏的默認字體是不同的（移動端設備裏大部分沒有宋體和微軟雅黑）

 

Font-family:helvetica;

 

四、橫豎屏切換或用戶本身經過瀏覽器設置的話，能夠改變字體的大小（須要給body下的全部元素）

 

-webkit-text-size-adjust:100%;

 

五、長按文字ios下會選中文字，安卓下無效

 

-webkit-user-select:none;

 

六、固定定位在一些ios低版本下不兼容，以及一些國產手機裏也不兼容

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程