實用的移動端web佈局技巧

時間  2019-11-21
標籤 實用 移動 web 佈局 技巧 欄目 無線 简体版
原文   原文鏈接
1.添加meta，使得網頁在手機端能正常瀏覽

html 代碼javascript

<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本之後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別爲電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection" content="telephone=no, email=no" />
複製代碼
2.考慮是使用px，仍是使用rem

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可； 若是須要高精度還原，適配各類手機，最好仍是使用rem吧夥計們css

1）使用px佈局，寬度可以使用百分比伸縮，高度使用固定像素 html 代碼html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<title></title>
		<style type="text/css"> body{ margin: 0; padding: 0; width: 320px; height: 568px; background:#fafafa; border:1px solid #ccc; } .div1{ width: 40%; height: 60px; background: #FF0000; float:left; } .div2{ width: 60%; height: 60px; background: #FF7E00; float:left; } </style>
	</head>
	<body>
		<div class="div1">40%</div>
		<div class="div2">60%</div>
	</body>
</html>
複製代碼

2）使用rem的話，須要有一個輔助才能打出高額的傷害；從經常使用的兩個輔助中選擇一個； 輔助一，使用@media，根據屏幕大小自動調整 能夠看看這篇文章詳細介紹《CSS3的REM設置字體大小》java

輔助二，使用js動態計算，這個簡直好用的不得了，簡直完美還原設計稿 html 代碼css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>template</title>
    <script> //這個是小米官網的寫法 ! function(n) { var e = n.document, t = e.documentElement, i = 720, //設計圖尺寸 d = i / 100, //1rem = 100px o = "orientationchange" in n ? "orientationchange" : "resize", a = function() { var n = t.clientWidth || 320;n > 720 && (n = 720); t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1)) }(window); </script>
    <style> *{box-sizing: border-box;} body{margin: 0;padding: 0;font-size: 16px;} .block{background: #1e90ff;width: 7.2rem;height: 2rem;} .block2{background: #ef4437;width: 3.6rem;height: 3.6rem;} </style>
    </head>
    
    
	<body>
		<div class="wrap">
			<div class="block">100% 7.2rem 設計圖尺寸720，1rem=100px</div>
			<div class="block2">50% 3.6rem</div>
		</div>
	</body>
</html>
複製代碼

我本身經常使用的是adaptive.jsgit

3.頁面樣式重置，這個在pc端仍是移動端都會用到的

css 代碼github

/*css初始化*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font-size:16px;font-family: "微軟雅黑","microsoft yahei","microsoft sans serif";background: #ededed;color: #313131;} 
a,a:hover{text-decoration:none;color:inherit;} 
em,i{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word} 
input,textarea{outline: none;font-family: "微軟雅黑","microsoft yahei";}
*{box-sizing: border-box;} /*使用border-box盒模型使得計算位置、大小更方便*/
input[type='submit'],input[type='button'],input[type='reset']{-webkit-appearance: none;}/*消除iPhone上按鈕顯示怪異的狀況*/
複製代碼
4.使用一屏佈局

這個是我在查看一些UI框架發現的東西，整個頁面分三塊不超過一屏，header、contaner、footer。 內容都放在container中，超過就overflow-y:scroll; 這個其實挺好用的，使得頁面結構清晰，佈局容易 html 代碼web

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<title></title>
		<style type="text/css"> body,html{ position: absolute; margin: 0; padding: 0; width: 320px; height: 100%; } *{box-sizing: border-box;} .g-page{ position: absolute; top: 0; width: 100%; height: 100%; background: #FAFAFA; } .g-header{ position: absolute; top: 0; width: 100%; height: 40px; line-height: 40px; background: #EF4437; color: #fff; text-align: center; z-index: 10; } .g-content{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #008000; } .g-footer{ position: absolute; bottom: 0; width: 100%; height: 40px; line-height: 40px; background: #666; color: #fff; text-align: center; } .g-header ~ .g-content{ top: 40px; } .g-footer ~ .g-content{ bottom: 40px; } .div1{ height: 300px; background: #909090; } .div2{ height: 300px; background: #82615f; } .div3{ height: 300px; background: #1e90ff; } </style>
	</head>
	<body>
		<div class="g-page">

			<div class="g-header">頭部</div>

			<div class="g-footer">頁腳</div>

			<div class="g-content">
				<div class="div1">
					內容
				</div>
				<div class="div2">
					內容
				</div>
				<div class="div3">
					內容
				</div>
			</div>

		</div>
	</body>
</html>
複製代碼
5.左邊定寬，右邊自適應的佈局，咱們會常常用到

html 代碼app

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<style> body{margin: 0;padding: 0;} *{box-sizing: border-box;} .container-1{ display: flex; height: 150px; margin-bottom: 40px; } .container-1 .left{ width: 150px; height: 100%; background: #1E90FF; } .container-1 .right{ flex: 1; height: 100%; background: #ef4437; } .container-2{ position: relative; width: 100%; height: 150px; margin-bottom: 40px; } .container-2 .left{ position: absolute; width: 150px; height: 100%; background: #EF2322; z-index: 2; } .container-2 .right{ position: absolute; left: 0; width: 100%; height: 100%; padding-left: 150px; background: #1E90FF; } .container-3{ overflow: hidden; height: 150px; } .container-3 .left{ float: left; width: 150px; height: 100%; background: #1E90FF; } .container-3 .right{ /*width: 100%;*/ height: 100%; padding-left: 150px; background: #EF2322; } </style>
	</head>
	<body>
		<div style="width: 800px;margin: 0 auto;">
			<div class="container-1">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			
			<div class="container-2">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			
			<div class="container-3">
				<div class="left">2222222222222</div>
				<div class="right">1111111111111111111111111111111111111111111111<br>222222222222222</div>
			</div>
		</div>
		
	</body>
</html>
複製代碼
6.模塊化、組件化開發，防止css命名重複，提升開發效率

這個對我這個英語詞彙量不大的來講，簡直是福音啊， 之前寫css總是怕重名，寫的各類奇怪命名，效率還低， 自從有了這個媽媽不再用擔憂《如何寫出優雅的css代碼》框架

7.一像素的問題

在高分屏上寫一個像素邊框，那顯示的活脫脫的就是兩個像素， 設計師不滿意，老闆不滿意； 咱們能夠用僞元素和css3來解決 css 代碼

.item{
    width:2rem;
    height:0.5rem;
}
.item:after{
   	content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 2;
    bottom: 0;
    border-bottom: 1px solid #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程