整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
5移動端頁面自適應(yīng)普遍使用的方法，理論上講使用這個標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
在HTML文檔頭部添加viewport標(biāo)簽，設(shè)置meta屬性值為“width=device-width”，可以讓瀏覽器根據(jù)設(shè)備屏幕的寬度自動調(diào)整頁面的縮放比例，從而實(shí)現(xiàn)頁面自適應(yīng)。
<meta
name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no"/>每個屬性的詳細(xì)介紹：
width：#viewport 的寬度，可以指定為一個像素值，如：600，或者為特殊的值，如：device-width （設(shè)備的寬度）。 height：#viewport的高度。 initial-scale：#初始縮放比例，即當(dāng)瀏覽器第一次加載頁面時的縮放比例。 maximum-scale：#允許瀏覽者縮放到的最大比例，一般設(shè)為1.0。 minimum-scale：#允許瀏覽者縮放到的最小比例，一般設(shè)為1.0。 user-scalable：#瀏覽者是否可以手動縮放，yes或no。 |
媒體查詢可以根據(jù)設(shè)備屏幕的寬度和高度來匹配不同的樣式規(guī)則，從而實(shí)現(xiàn)響應(yīng)式布局。通過設(shè)置不同的CSS樣式，可以讓頁面在不同的設(shè)備上呈現(xiàn)不同的布局和樣式。
@media screen and (max-width: 767px) {
/* 在寬度小于767px的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在寬度在768px到1023px之間的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在寬度大于等于1024px的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 18px;
}
}彈性布局可以根據(jù)設(shè)備屏幕的寬度自動調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁面自適應(yīng)。通過設(shè)置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實(shí)現(xiàn)頁面的自適應(yīng)性。
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 300px;
margin: 10px;
}rem單位是相對于根元素(html元素)的字體大小來計算的單位，可以根據(jù)設(shè)備屏幕的字體大小自動調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁面自適應(yīng)。通過設(shè)置根元素的字體大小，可以讓整個頁面的元素按照一定的比例進(jìn)行縮放。
html {
font-size: 16px;
}
@media screen and (max-width: 767px) {
/* 在寬度小于767px的設(shè)備上將根元素的字體大小設(shè)置為14px */
html {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在寬度在768px到1023px之間的設(shè)備上將根元素的字體大小設(shè)置為16px */
html {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在寬度大于等于1024px的設(shè)備上將根元素的字體大小設(shè)置為18px */
html {
font-size: 18px;
}
}rem是CSS3新增的一個相對單位（root em，根em）,使用rem為元素設(shè)定字體大小時，是相對大小，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
(其他)默認(rèn)html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設(shè)為2rem。
通常情況下，為了便于計算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：
Html{font-size:62.5%(10/16*100%)}具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過js一次定義方法如下：
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓? };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
vw和vh是根據(jù)設(shè)備的寬度和高度來決定的，設(shè)備的寬就是100vw，設(shè)備的高就是100vh，
你設(shè)置的50vw就是相當(dāng)于設(shè)備寬度的50%，你設(shè)置的100vh就是相當(dāng)于設(shè)備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設(shè)置100vh，那么基本上(設(shè)備的寬小于高的情況)就會超出你的屏幕X軸出現(xiàn)滾動條。如果你給元素高度設(shè)置100vw，那么就滿足不了你想要把這個元素鋪滿整個設(shè)備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。
使用方法：
1. 將設(shè)計圖放到PS里面，查看整個圖片的寬度和高度，分別放在設(shè)計稿寬度和設(shè)計稿高度當(dāng)中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當(dāng)中。（注意還是px單位哦）
3. 然后點(diǎn)擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當(dāng)中了哦。（注意是vw和vh單位哦）
一般移動端的布局可分為三個部分，頭部->主體->tabbar的腳部。
所以我們可以把項(xiàng)目的外層這樣設(shè)置一下：
.body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* 頭部部分 */
header {
height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計圖調(diào)整 */
}
/* 主體部分 */
main {
flex: 1; /* 占據(jù)頁面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計圖調(diào)整 */
}使項(xiàng)目中的字體大小自適應(yīng)：
機(jī)網(wǎng)頁制作是相對于傳統(tǒng)的電腦端網(wǎng)頁而言的，二者在設(shè)計和使用上并沒有太多的不同，主要是針對用戶瀏覽界面的大小而量身訂制的網(wǎng)頁。電腦端顯示器比較大，現(xiàn)在普及22英寸的顯示器了，主流網(wǎng)頁主體寬度一般不能少于1200像素，如果網(wǎng)頁的主體寬度過窄會造成瀏覽器兩邊空白過多，嚴(yán)重影響用戶視覺體驗(yàn)。而手機(jī)網(wǎng)站頁面需要考慮不同尺寸的手機(jī)顯示器的問題，一般可以按照自適應(yīng)的方式來解決。移動端與電腦的最大不同是顯示尺寸的問題，可以用布局單位像素和%來解決。
怎樣做手機(jī)端網(wǎng)頁才能確保專業(yè)、簡潔、大氣呢？
1、考慮使用網(wǎng)站二級域名
許多情況下手機(jī)的網(wǎng)站域名和PC端用的是同一個。過去往往為了圖方便使用目錄做為移動端頁面的展示，域名和電腦端是同一個。這樣的不利因素是一旦移動端網(wǎng)頁被收錄后用戶在電腦上訪問會展示手機(jī)瀏覽的效果，這樣有可以會造成圖片拉伸和變形。建議移動端使用二級域名。
2、合理應(yīng)用HTML5+CCS3
H5頁面與傳統(tǒng)頁面最大的不同是交互和特效，這也是各大瀏覽器淘汰Flash的主要原因。合理使用特效有利于提升網(wǎng)站用戶體驗(yàn)，過多使用一方面會讓設(shè)計實(shí)現(xiàn)變得的復(fù)雜，另一方面加大了網(wǎng)頁加載的壓力，所以說合理應(yīng)用最重要，網(wǎng)頁要炫更要快。
3、改變以往的設(shè)計習(xí)慣
過去我們做電腦端網(wǎng)頁的時候要考慮主體網(wǎng)頁的寬度，一般不超過1200px，它的單位是像素，還要考慮網(wǎng)頁兩邊空間的視覺效果問題。移動端網(wǎng)頁的設(shè)計與電腦端略有不同，設(shè)計單位使用百分比%，這樣就可以兼容不同手機(jī)屏幕尺寸，不必考慮網(wǎng)頁兩邊留白的問題。只要設(shè)計符合www規(guī)則，無非就是從大視野變成了不視角的問題。
4、要考慮手機(jī)網(wǎng)頁加載快慢的問題
在設(shè)計方案手機(jī)版網(wǎng)站時，盡量避免的應(yīng)用彈出窗口、flash、大文件等 ，載入這一類程序流程通常會較為用時耗總流量。主流瀏覽器已不再支持Flash了，所以盡量避免swf文件的調(diào)用。雖然現(xiàn)在5G時代了，但也要考慮網(wǎng)站的帶寬問題，你手機(jī)流量和速度可能會很好，網(wǎng)站使用過多資源而服務(wù)器對外帶寬又不高照樣會影響網(wǎng)頁打開速度。
5、重視不同手機(jī)效果調(diào)試
手機(jī)wap網(wǎng)站開發(fā)完成后盡可能使用不同品牌、不同屏幕尺寸、不同手機(jī)系統(tǒng)的移動端進(jìn)行調(diào)試與檢驗(yàn)，例如：安卓系統(tǒng)下的網(wǎng)頁效果與蘋果ios系統(tǒng)是不一樣的，個別網(wǎng)頁屬性不見得都能兼容，所以說要多看多對比，發(fā)現(xiàn)問題及時處理，做到不同環(huán)境下的視覺效果統(tǒng)一性。
、 利用meta標(biāo)簽
Meta標(biāo)簽主要用來描述一個HTML網(wǎng)頁文檔的屬性，如作者、日期時間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁利于搜索引擎。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁面不可縮放。
以上標(biāo)簽只支持一種尺寸，正確的做法是用js動態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);
if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }
else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }
else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }
</script>
2、百分比法
CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。
3、 使用CSS3單位rem
在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設(shè)寬度為W，一個div在寬度為640px的設(shè)計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？
計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。
所以會在頭部加上這個JS代碼：
<script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
</script>
4、 媒體查詢
媒體查詢正是為解決網(wǎng)頁適應(yīng)手機(jī)屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。
以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁面需要比較好的編程基礎(chǔ)和技術(shù)覺悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁專門學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站。現(xiàn)在還有免費(fèi)建站活動，無論外行內(nèi)行，大家可以注冊體驗(yàn)一下。
零基礎(chǔ)免費(fèi)做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
