2. 程式人生 > >運用flex和rem為移動端佈局

運用flex和rem為移動端佈局

阿新 • • 發佈：2018-12-20

flex是對於頁面一個非常重要的樣式，不會用到px來佈局，用rem來代替 rem是根據根文件，也就是html標籤上的字型大小來運算的1rem=16px; 手機端的佈局也很簡單，掌握好flex所有的屬性和rem寫頁面就是一件很輕鬆的事。 flex的知識過多，咱們只說能應用到的：

HTML

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"
 
 />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<title>flexPhone</title>
	</head>

	<body>
		<div class="container">
			<div class="nav">
				<div class="nav-header">Logo</
 
div>
				<!--商標-->
				<ul class="nav-right">
					<li>Demo 1</li>
					<li>Demo 2</li>
					<li>Demo 3</li>
					<li>Demo 4</li>
				</ul>
			</div>
			<!--導航-->
			<div class="Pagebody">
				<div class="banner">
 
</div>
				<!--banner圖-->
				<div class="main">
				 
				</div>
				<!--主體內容-->
			</div>
			<!--主體部分-->
			<div class="footer">
				<div class="footer-list">List 1</div>
				<div class="footer-list">List 2</div>
				<div class="footer-list">List 3</div>
				<div class="footer-list">List 4</div>
			</div>
			<!--底部選框-->
		</div>
	</body>

</html>

CSS

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

html,
body,
.container {
	width: 100%;
	height: 100%;
	font-size: 100px;
}

.container {
	font-size: 0.12rem !important;
	display: flex;
	flex-direction: column;
}

.nav {
	top: 0;
	border-bottom: 0.01rem solid lightgray;
}

.nav,
.footer {
	background: linear-gradient(to bottom, #333, #444, #333);
	color: white;
	position: fixed;
	width: 100%;
	height: 0.5rem;
	box-sizing: border-box;
	padding: .16rem 0.16rem;
}

.footer {
	border-top: 0.01rem solid lightgray;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.nav .nav-header {
	font-weight: bold;
	color: #fff;
	line-height: 100%;
	font-size: 0.18rem;
	float: left;
}

.nav .nav-right {
	float: right;
}

.nav .nav-right li {
	float: left;
	margin-left: 0.12rem;
}

.Pagebody {
	flex:1;
	padding-top: 0.5rem;
}

.banner {
	width: 100%;
	height: 1.5rem;
	background: cornflowerblue;
}

.main{
	box-sizing: border-box;
	height: auto;
	padding:0 0.16rem;
}

效果演示

在這裡插入圖片描述

書寫時注意↓

  1. meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

這是在移動端佈局時必須有的標籤，意思是能讓使用者縮放螢幕的大小，頁面寬度=裝置寬度，我在這裡用的裝置型號是iPhone5的螢幕

  1. html和body及自定義一個盒子來包裹頁面，即 .container 這裡把html的字型設為100px,那麼rem就與px成了百倍的關係；即，1rem=100px

  2. 涉及到的flex

display: flex;	/*顯示方式設定為flex*/
flex-direction: column;  /*顯示方向為 縱向*/
flex:1;			/*分配為1份，加入有兩個pagebody每個就佔總高的1/2*/
align-items: center;	/*設定軸線上子元素 為 居中*/
justify-content: space-around;	/*排列方式 為 平均分配 且 兩端留有空餘*/

相關推薦

運用flex和rem為移動端佈局

flex是對於頁面一個非常重要的樣式，不會用到px來佈局，用rem來代替 rem是根據根文件，也就是html標籤上的字型大小來運算的1rem=16px; 手機端的佈局也很簡單，掌握好flex所有的屬性和rem寫頁面就是一件很輕鬆的事。 flex的知識過多，咱們只

如何利用vw+rem進行移動端佈局

前言 因為在公司，只有一個前端，在做移動端佈局的時候。利用px進行佈局,發現，需要進行各種手機的適配。 所以在開發第二版的時候，想著引用lib-flexible庫(即手淘的方案),詢問了上一家公司的同事，會有一些字型和一些詭異的問題。 在無意中，突然一個網

媒體查詢結合rem實現移動端佈局

第一步：先寫好重置的樣式。直接複製貼上即可 @media all and (max-width: 320px){ html{ font-size: 12px; } } @media all and (min-width: 321

【移動端適配方案二 彈性佈局】Flex彈性佈局+rem實現移動端適配（JS+rem+viewport）

前端開發工程師根據UI設計師給的設計稿進行開發。為了保證在各種螢幕上的不失真，就要根據實際螢幕寬度做等比例換算，才能寫進CSS實現如下：1、設定width=device-width 也就是將layout viewport（佈局視口）的寬度設定 為ideal viewport（

移動端佈局字型單位的選擇之px、rem和em揭祕

       一般我們在pc上主要是流動式佈局，採用的單位一般都是px，由於pc螢幕都是很大的，所以不用過多的擔心字型單位的選擇，但是在移動端呢？那麼這完全相反，由於手機螢幕較小，且各種螢幕尺寸你一不

web頁面常用佈局（pc端佈局和移動端佈局）

web頁面常用佈局（pc端佈局和移動端佈局） 什麼是web佈局呢？ 佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種： 1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框

asp.net Core 使用過濾器判斷請求客戶端是否為移動端,並實現PC端和移動端請求對映和自動跳轉

很多時候我們做網站時單純的用bootstrap等前端框架實現的前端自適應帶給使用者的體驗並不太好，所以為了提高使用者體驗會專門針對PC端網頁重新設計一套移動端網頁，但是怎麼才能做到在移動端訪問PC頁面的時候返回對應的移動端頁面，而不是PC端頁面呢？下面我們就簡單的進行介紹。主要技術是asp.net core。

移動端佈局-媒體查詢 + rem單位佈局

現在HTML5前端不僅僅侷限於PC端，HTML5前端還可以實現移動端，實現微信等等，傳統的佈局單位px，不能是達到自適應的學校過，那麼移動端佈局有哪些方式呢? 媒體查詢 + rem單位佈局 說道這個佈局，，那麼我們首先得了解什麼是媒體查詢，rem是什麼？ 媒體查詢：媒體

最順手最簡單的移動端佈局方案——rem佈局

在實踐中用的最順手最簡單的佈局方案——rem佈局 rem佈局非常簡單，首頁你只需在頁面引入這段原生js程式碼就可以了 (function (doc, win) { var docEl = doc.documentElement, r

rem自適應移動端佈局

現在的移動終端（手機，pad）螢幕大小各不一樣，為了適應每一種螢幕寬度而設計多款樣式明顯是不科學的，所以就有了自適應佈局的概念。 以前，實現自適應佈局的時候，我使用了CSS3 @media 監測視口寬

【移動端佈局】拋棄rem，使用vw

你還在用rem彈性佈局嗎？在html檔案頭部放入一大段壓縮過的js程式碼，是不是讓你很難受？來了解下vw吧，能讓你的程式碼更純粹 簡單介紹下rem佈局方案 rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用re

移動端佈局之REM，以及實際使用總結

1.以rem 為單位，前端切圖，以640尺寸（保證放大的圖片質量）， width,height,padding,marging 等切距離，以320的尺寸，也可以以640的尺寸。 配合以下媒體查詢 html {     font-size: 62.5%;/* 10÷16=62.5% */ } @media o

基於REM的移動端自適應佈局方案

背景現在工作中有超過一半的時間用於移動端專案的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式佈局的要求更高，不能像PC頁面一樣設計幾個斷點利用媒體查詢，兩邊留空白就解決。移動端頁面需要把螢幕空間都利用上，而移動裝置的

移動端佈局、rem佈局、手淘團隊flexible.js、zoom縮放

記錄我的第一篇部落格    學習前端有一段時間，看部落格一直是自己的學習習慣，今天我也來分享一下，從此以後，開始我的部落格之旅（廢話了幾句），下面進入正題： 移動端適配，對於我來說，一直是一個頭疼的問題；經過長期的掙扎，終於花了一整塊時間去研究了一下rem佈局； 我在網上

移動端佈局rem如何使用

移動端佈局關鍵是要設定meta標籤： <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-

移動端佈局和pc端寫法

一：移動端準備工作<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-eq

Html5移動端佈局及(rem佈局)頁面自適應佈局詳解（轉）

常見的頁面佈局方式有， 靜態佈局  px佈局 流式佈局（Liquid Layout） 主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用） 自適應佈局（Adaptive Layout） 即建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍 響應式

移動端佈局】拋棄rem，使用vw 【移動端佈局】拋棄rem，使用vw

【移動端佈局】拋棄rem，使用vw 簡單介紹下rem佈局方案 rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用rem單位時，你只需要改變根元素font-size

專案開發之rem加媒體查詢實現移動端佈局

        這次小編將要拿一個實際開發來將佈局，首先我們拿到美工給的圖一般會分為兩種格式一種是640的圖一種是750的圖這兩種圖其實的效果是一樣的只不過給,我們得到的測量資料不同，所以其他都是一樣

js判斷是否為移動端

agent || isa san navigator mac os 移動 roi 是否 var u = navigator.userAgent;var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘)