移動端活動頁面搭建

king1497322383377發表於2018-05-29

網際網路上的自適應方案到底有幾種？

固定一個某些寬度，使用一個模式，加上少許的媒體查詢方案
使用flexbox解決方案
使用百分比加媒體查詢

淘寶 flexible.js

rem是根據html的font-size大小來變化，正是基於這個出發，我們可以在每一個裝置下根據裝置的寬度設定對應的html字號，從而實現了自適應佈局。

head頭部引入flexible.js;
head頭部需要寫；
寬度高度用rem。
字型適配：大字型可以用rem來處理，小的段落字型需要固定為px尺寸,針對於描述性的文字，比如說段落文字。但有的時候文字的字號也需要分場景的，特殊字型或者大號字型完全可以使用rem作為單位。
完畢

程式碼

js版本：

//調整-文字大小-用於簡單活動頁面
(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if(clientWidth>=750){
				docEl.style.fontSize = '100px';
			}else{
				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
			}
		};

	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
複製程式碼

//調整-文字大小-用於高標準相容頁面
;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//與淘寶做法不同，直接採用簡單的rem換算方法1rem=100px
		var rem = width * 100 / designWidth;
		//相容UC開始
		rootStyle="html{font-size:"+rem+'px !important}';
		rootItem = document.getElementById('rootsize') || document.createElement("style");
		if(!document.getElementById('rootsize')){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id='rootsize';
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//相容UC結束
		docEl.style.fontSize = rem + "px";
	};
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止執行兩次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 瀏覽器後退的時候重新計算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);
複製程式碼

flex 均分佈局

.wxApp .nav-date.grid{display:flex;}
.wxApp .nav-date.grid span{flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;}
複製程式碼

sass 打包檔案

語法、程式碼壓縮、合併。

壓縮1行：sass --style compressed style.scss wxStyle.css

格式化：sass --style compact style.scss wxStyle.css
複製程式碼

使用媒體查詢

@charset "utf-8";

/**
 * iPhone 4/4s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3) {

}

/**
 * iPhone 4/4s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:portrait)  {

}

/**
 * iPhone 4/4s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:landscape) {


}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {


}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {


}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    //iPhone 6 Portrait
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    //iPhone 6 landscape
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    //iPhone 6+ Portrait
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    //iPhone 6+ landscape
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    //iPhone 6 and iPhone 6+ portrait and landscape
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    //iPhone 6 and iPhone 6+ portrait
}

@media only screen and (max-device-width: 640px), 
only screen and (max-device-width: 667px), 
only screen and (max-width: 480px) 
and (orientation : landscape){ 
    //iPhone 6 and iPhone 6+ landscape
}
/**
 *  Galaxy S3 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

}

/**
 *  Galaxy S3 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  Galaxy S3 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/**
 *  Galaxy S4 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  Galaxy S5 landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  HTC One landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  HTC One portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  HTC One landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}


/**
 *  iPad Mini landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 3/4 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  Galaxy Tab 10.1 landscape & portrait
 */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {

}

/**
 *  Galaxy Tab 10.1 portrait
 */
@media
(max-device-width: 800px)
and (orientation: portrait) {

}

/**
 *  Galaxy Tab 10.1 landscape
 */
@media
(max-device-width: 1280px)
and (orientation: landscape) {

}

/**
 *  Asus Nexus 7 landscape & portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {

}

/**
 *  Asus Nexus 7 portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {

}

/**
 *  Asus Nexus 7 landscape
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 7" landscape & portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 7" portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 7" landscape
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 8.9" landscape & portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 8.9" portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 8.9" landscape
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Non-Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}

/**
 *  Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}

/**
 *  Apple Watch
 */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {

}

/**
 *  Moto 360 Watch
 */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}
複製程式碼

移動端適配頁面快速搭建
2017-01-20
「移動端」Web頁面適配
2021-08-23
Web
移動端頁面滾動--解決方法
2018-05-04
雙十一移動端頁面總結
2018-11-06
利用whistle除錯移動端頁面
2018-04-17
除錯
淺談移動端開發頁面
2015-06-24
移動端觸屏拖動頁面滾動效果
2017-02-22
基於 vue 的移動端頁面視覺化搭建工具思路
2019-04-24
Vue視覺化
移動端頁面寬度相容處理
2017-02-23
移動端頁面功能之——長按事件
2016-06-28
事件
42個移動端啟動頁面優化技巧
2015-08-14
優化
移動端頁面分享快照生成總結
2018-09-19
移動端鍵盤遮擋頁面原理分析
2018-01-26
移動端H5頁面注意事項
2017-04-05
H5
Web移動端頁面 –響應式和動態REM
2018-05-11
WebREM
42個移動端啟動頁面優化 Tips
2015-09-21
優化
移動端H5解惑-頁面適配（二）
2018-08-04
H5
移動端HTML5頁面開發備忘錄
2018-03-16
HTML
移動端頁面大小自適應程式碼例項
2017-02-19
一點關於移動端頁面開發的總結
2018-03-10
移動前端除錯頁面–weinre
2015-07-30
前端除錯
移動前端調式頁面--weinre
2015-07-27
前端
移動端網頁除錯
2019-05-26
網頁除錯
移動終端H5頁面meta標籤的設定
2018-04-01
H5
移動端(手機端)頁面自適應解決方案—rem佈局篇
2017-11-30
REM
移動端軟鍵盤彈出影響頁面佈局問題
2019-02-16
flexible.js-移動端H5頁面適配應用
2018-09-28
FlexJSH5
移動端APP rem載入時頁面放大或壓縮解決
2018-06-02
APPREM
如何除錯移動端網頁
2014-12-20
除錯網頁
【面經】美團複試-前端&移動端
2024-03-22
前端
好程式設計師web前端技術分享移動端頁面佈局
2019-05-07
程式設計師Web前端
移動端與H5頁面畫素的差異與關係
2019-05-16
H5
如何搭建移動端CSS樣式庫
2017-09-27
CSS
移動端網頁除錯之 Eruda
2019-02-19
網頁除錯
移動端 Web 網頁除錯技巧
2016-03-21
Web網頁除錯
【面經】美團-前端&移動端暑期實習
2024-03-20
前端
移動端頁面鍵盤出現“搜尋”按鍵且實現提交功能
2019-02-16
我的第一次移動端頁面製作 — 總結與思考
2016-11-13

移動端活動頁面搭建

網際網路上的自適應方案到底有幾種？

淘寶 flexible.js

flex 均分佈局

sass 打包檔案

使用媒體查詢

相關文章