移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度
移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度
1、使用meta標(biāo)簽，這也是普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
首先解釋該標(biāo)簽的含義：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
如果你完全不了解這個(gè)標(biāo)簽的使用需要先百度一下。
解釋：content中的“width” 這個(gè)width指的是什么寬度，我看過的文章對(duì)這個(gè)都沒有解釋的很清楚，有幾個(gè)備選：虛擬窗口的寬度、手機(jī)屏幕的寬度、還是頁面的寬度等等？經(jīng)試驗(yàn)這個(gè)指的是虛擬窗口的寬度。了解寬度之后，對(duì)后續(xù)的各種scale，就應(yīng)該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會(huì)有問題出現(xiàn)安卓設(shè)備尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標(biāo)簽只能支持一種尺寸，當(dāng)然有些瀏覽器會(huì)自動(dòng)縮放使其適應(yīng)屏幕，但這不是統(tǒng)一標(biāo)準(zhǔn)，正確的做法是用js動(dòng)態(tài)生成此標(biāo)簽，當(dāng)然，應(yīng)該先獲取屏幕尺寸。
對(duì)于此標(biāo)簽還有以下需要分享：
1)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。
2)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會(huì)將user-scalable理解為用戶手動(dòng)縮放，如果user-scalable=no，initial-scale將無法生效。
3)、手機(jī)頁面可以觸摸移動(dòng)，但是如果有需要禁止此操作，就是頁面寬度等于屏幕寬度是頁面正好適應(yīng)屏幕才可以保證頁面不能移動(dòng)。
4)、如果頁面是經(jīng)過縮小適應(yīng)屏幕寬度的，會(huì)出現(xiàn)一個(gè)問題，當(dāng)文本框被激活（獲取焦點(diǎn)）時(shí)，頁面會(huì)放大至原來尺寸。
以上是使用viewport標(biāo)簽的一些小體會(huì)，分享給大家。
2、第二種自適應(yīng)屏幕尺寸的方法是將頁面做成980寬度，在沒有viewport標(biāo)簽的情況下，移動(dòng)設(shè)備屏幕范圍會(huì)顯示頁面980的寬度，如果頁面大于980，則在屏幕范圍內(nèi)顯示頁面一部分，如果頁面小于980，則頁面居中兩側(cè)顯示空白，那么你猜，如果頁面寬度等于980會(huì)出現(xiàn)什么情況呢？
3、百分比法，首先應(yīng)明確一個(gè)概年，CSS中的百分比中的百指的是什么，我告訴你指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是百，子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。
4、使用css3單位rem，有人這樣解釋rem，root-em，就是根部的em，想必em大家都懂的，那么rem就是將根節(jié)點(diǎn)html的font-size的值作為整個(gè)頁面的基準(zhǔn)尺寸，默認(rèn)html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。當(dāng)我們把html的font-size設(shè)為20px時(shí)，1rem=20px，那么32px=1.6rem了。到這里我們也就了解了rem的用法了，那么怎么用rem來實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)呢？在頁面載入開始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者的差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，這樣如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？計(jì)算：div寬度dW2=dW1/100,px與rem之間很好換算，除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size，計(jì)算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解釋一下為什么把100作為一個(gè)縮放比例，用10或1不是更方便嗎，這是因?yàn)榇蠖鄶?shù)瀏覽器font-size的最小值為12px，所以只能用100了。
5、媒體查詢，媒體查詢也是css3的方法，我們要解決的問題是適應(yīng)手機(jī)屏幕，這個(gè)媒體查詢正是為解決這個(gè)問題而生，媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};這里僅介紹這種思路，關(guān)于媒體查詢的詳細(xì)用法請(qǐng)參閱css手冊(cè)。
之前介紹一篇文章是：響應(yīng)式web實(shí)戰(zhàn)總結(jié) 已經(jīng)介紹了一些知識(shí)點(diǎn)，這里就不多介紹了；我們這邊來了解下如何使用媒體查詢寫不同的css樣式；針對(duì)響應(yīng)式web設(shè)計(jì)開發(fā)，使用媒體查詢來適應(yīng)不同的手機(jī)屏幕樣式開發(fā)時(shí)，我們需要寫不同的樣式，為此我們來分享下我個(gè)人開發(fā)響應(yīng)式web頁面的經(jīng)驗(yàn)；針對(duì)目前手機(jī)的獨(dú)立像素有320，360，384，400，還有iphone6+是414的獨(dú)立像素，因此我們只需要針對(duì)目前這幾種匹配即可；如下:
1.針對(duì)手機(jī)獨(dú)立像素是360 ~399等屏幕的寬度
/*
* 但是邊距 字體大小等還是安裝360px來計(jì)算
*/
@media (min-width:360px) and (max-width: 399px) {}
2. 針對(duì)手機(jī)獨(dú)立像素是320~359之間的
/* min-width:320px
* 針對(duì)設(shè)備獨(dú)立像素為320px 的css
* min-width:320 和 max-width:359之間
*/ @media (min-width: 320px) and (max-width:359px){}
3. 針對(duì)設(shè)備獨(dú)立像素為400px以上的樣式。
/*
* 針對(duì)設(shè)備獨(dú)立像素為400px，邊距等等都按400px來計(jì)算
*/
@media (min-width: 400px) and (max-width:450px){}
4. 針對(duì)設(shè)備獨(dú)立像素為640px ~ 999px的css
/* min-width:640px
* 針對(duì)設(shè)備獨(dú)立像素為640px 的css
* min-width:640 和 max-width:999之間
* 邊距等按640px來計(jì)算
*/
@media (min-width: 640px) and (max-width:999px){}
5. 但是在PC端，我們?yōu)榱诉m應(yīng)PC端，所以針對(duì)寬度為1000以上也做一個(gè)顯示處理。
/* 最小寬度1000樣式
*為了適應(yīng)PC端 所以PC端在設(shè)計(jì)時(shí)候 默認(rèn)以1000px來設(shè)計(jì)的
*/
@media screen and (min-width:1000px) {}
一：使用rem來設(shè)置字體
為了方便計(jì)算字體，我們來設(shè)置瀏覽器10px，我們都知道瀏覽器默認(rèn)的像素是16px，因此我們需要對(duì)html{font-size:62.5%;} // 10 / 16 = 62.5%;
首先假如設(shè)計(jì)搞在移動(dòng)端上是按照750px設(shè)計(jì)稿上的話，假如字體在750px下字體大小我們使用rem來寫大?。荒敲此麄兊淖煮w大小在各個(gè)獨(dú)立像素下如下計(jì)算：
針對(duì)設(shè)備獨(dú)立像素為640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
}
@media (min-width: 400px) and (max-width:450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
}
@media (min-width:360px) and (max-width: 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
}
@media (min-width: 320px) and (max-width:359px){
/* 750/320 = 2.34 */
html{font-size: 26.7%} /* 62.5 / 2.34 */
}
二： 針對(duì)寬度，高度，background-size, margin及padding的計(jì)算方法；
假如在750px下的寬度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;
針對(duì)設(shè)備獨(dú)立像素為640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
// 下面的屬性都是 本身的像素 / 1.17 得來的
width: 112.82px; // 132 / 1.17
height:112.82px; // 132 / 1.17
background-size:112.82px 112.82px; // 132 / 1.17
margin:17.09px; // 20 / 1.17
padding:17.09px; // 20 / 1.17
}
@media (min-width: 400px) and (max-width:450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
// 下面的屬性都是 本身的像素 / 1.875 得來的
width: 70.4px; // 132 / 1.875
height: 70.4px; // 132 / 1.875
background-size: 70.4px 70.4px; // 132 / 1.875
margin:10.67px; // 20 / 1.875
padding: 10.67px; // 20 / 1.875
}
@media (min-width:360px) and (max-width: 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
// 下面的屬性都是 本身的像素 / 2.08 得來的
width: 63.46px; // 132 / 2.08
height: 63.46px; // 132 / 2.08
background-size: 63.46px 63.46px; // 132 / 2.08
margin:9.62px; // 20 / 2.08
padding: 9.62px; // 20 / 2.08
}
@media (min-width: 320px) and (max-width:359px){
/* 750/320 = 2.34 */
html{font-size: 26.7%} /* 62.5 / 2.34 */
width: 56.41px; // 132 / 2.34
height: 56.41px; // 132 / 2.34
background-size: 56.41px 56.41px; // 132 / 2.34
margin:8.55px; // 20 / 2.34
padding: 8.55px; // 20 / 2.34
}
但是有時(shí)候在小屏幕下字體太小了，使用戶看起來太吃力，我們可以針對(duì)小屏幕下適當(dāng)?shù)舸笠稽c(diǎn)即可；
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- HTML5 移動(dòng)頁面自適應(yīng)手機(jī)屏幕寬度詳解
- 微信小程序 圖片等比例縮放（圖片自適應(yīng)屏幕）
- 4種Android屏幕自適應(yīng)解決方案
- iOS Webview自適應(yīng)實(shí)際內(nèi)容高度的4種方法詳解
- jQuery自適應(yīng)輪播圖插件Swiper用法示例
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- jQuery簡單實(shí)現(xiàn)iframe的高度根據(jù)頁面內(nèi)容自適應(yīng)的方法
- EasyUI布局 高度自適應(yīng)
- JQuery EasyUI Layout 在from布局自適應(yīng)窗口大小的實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)布局高寬自適應(yīng)的簡單實(shí)例
相關(guān)文章
Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序獲取用戶openId的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序獲取用戶openId的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了JS快速檢索碰撞圖形之四叉樹碰撞檢測(cè)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了vscode工具函數(shù)once使用示例深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 WXML、WXSS 和JS介紹及詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對(duì)象詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對(duì)象詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
JavaScript實(shí)現(xiàn)文本轉(zhuǎn)換為文件示例詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)文本轉(zhuǎn)換為文件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 Storage API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
Zod進(jìn)行TypeScript類型驗(yàn)證使用詳解
這篇文章主要為大家介紹了Zod進(jìn)行TypeScript類型驗(yàn)證使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
9種使用Chrome Firefox 自帶調(diào)試工具調(diào)試javascript技巧
這篇文章主要介紹了9種使用Chrome Firefox 自帶網(wǎng)頁調(diào)試工具調(diào)試javascript技巧2017-12-12