幾種佈局方式
1.固定佈局 方法 <head>裡把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好，然後根據設計稿設定相應的寬度即可，其他地方類似於pc端。 優點 思路沿用pc端，上手比較快 缺點
大屏手機顯示網頁比較寬，而固定佈局寬度參照永遠是固定的寬度（設計稿的大小），導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。
2.流動佈局
方法
適用百分比(%)做單位。
優點 能更很好的適應各個螢幕解析度的手機。 缺點
不夠靈活，新增元素時，需要更改其他元素的值。
3.浮動佈局 方法
float+clearfix(清除浮動)
/--不需相容老版本--/
.clearfix:after{
content:"";
display:block;
clear:both;
}
--需要相容老版本--/
clearfix:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
**優點** 這是傳統的浮動方式，寫法簡單，實現效果起來乾脆利落 **缺點**
對浮動元素要求比較嚴格，佈局也不太靈活4.定位佈局 方法 在佈局當中很常用，利用position+四個方位的具體值（top/left/right/bottom）相互配合，實現起來也比較容易 優點
實現簡單，在移動端中，定位很常用，尤其是彈窗，
.mask{
position:fixed;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
}
缺點
移動端中頻繁的使用定位，會出現一些莫名的bug;
fixed+input在ios上存在bug,會出現使用fixed佈局的元素亂掉。在android手機上當input框獲取焦點時，換氣鍵盤，會出現定位的元素被擡升至手機鍵盤的上方。（瞭解）
5.混合佈局 方法 所謂混合佈局，就是把所有學到的知識靈活運用在佈局中。例如：rem+百分比(流動佈局) flex+rem等 優點
程式碼有點累贅；程式碼不統一，維護困難
6.flex佈局(重點)
方法
也叫彈性佈局。
/--只需父元素設定--/
{
display:-webkit-box; /android2.1-3.0 ios 3.2-4.3/
display:-moz-box; /firefox/
display:-webkit-flex; /chrome 21+/
display:-ms-flexbox; /wp ie 10/
display:flex; /android 4.4/
}
/--然後子元素設定相應的比例--/
{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
這個是最簡單的flex佈局了，其實彈性佈局裡面還有很多簡單高效實用的屬性，很方便移動端的佈局。 **優點** 自適應很好，靈活性很強，目前在移動端應用的還是比較廣泛。 **缺點**
需要寫很多相容程式碼。
7.rem佈局 方法 rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的font-size大小就可以控制rem的大小。有以下兩種適配方式：
[email protected](通過媒體查詢設定html的font-size值，達到自適應)
html{
-webkit-text-size-adjust:none;
font-size:10px;
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:10px;
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:10.25px;
}
}
@media screen and (min-width:415px) and (max-width:454px){
html{
font-size:10.5px;
}
}
@media screen and (min-width:455px) and (max-width:554px){
html{
font-size:10.75px;
}
}
@media screen and (min-width:455px){
html{
font-size:11px;
}
}
2.rem+js（通過js自動獲取裝置寬度，計算得到相應裝置下html的font-size值達到自適應）（瞭解）
!function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
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);
優點 在任何裝置下都可以達到完全適配，頁面佈局樣式完全自適應 缺點
[email protected]這種方式不能所有裝置全適配
8.響應式佈局 方法 使用@media(媒體查詢)設定頁面在不同的螢幕寬度下達到自適應以及響應式（根據不同螢幕大小，頁面佈局，樣式會做出相應的調整）典型案例（bootStrap官網） 優點 不僅在不同的螢幕下達到自適應，還會在相應的螢幕下對頁面佈局，樣式做出相應的調整，達到更加的使用者體驗 缺點
相容各種裝置工作量大，效率低下；程式碼累贅，會出現隱藏無用的元素，載入時間過長；一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況；增加UI和開發的工作量。
9.聖盃佈局
利用float來實現，首先將三列放到一個父元素內後左浮動，之後給左右中分別設定寬度200px,250px,100%。
之後給中間，右邊分別設定margin-left為-200px,-250px。之後再將左右兩列進行相對定位position：relative;並分別設定left:-200px;right:-250px;最後便是等高佈局了，給左中右設定padding-bottom:2000px;margin-bottom:-2000px;給其父元素設定overflow:hidden即可。
10.雙飛翼佈局
用float來實現，首先將左中右分別設定寬度為200px,100%,250px。中右分別設定margin-left為-200px和-250px.中間元素下有一個子元素，設定margin-left和margin-right分別為200px餘250px。最後便是等高佈局了，給左中右設定padding-bottom:2000px;margin-bottom:-2000px;給其父元素設定overflow:hidden即可。
相關推薦
對於前端開發中的幾種佈局方式的理解
一，靜態佈局（Static Layout） 在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置 二，彈性佈局（Elastc Layout） 是CSS3引入的佈局方式，其中flex-flow是flex-di
web前端開發之幾種佈局方式之響應式佈局
一理解幾種佈局的概念 1、靜態佈局（Static Layout） 即傳統Web設計，對於PC設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置； 對於移動裝
幾種佈局方式
1.固定佈局 方法 <head>裡把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好，
css的幾種佈局方式都在這
說道佈局方式，是我們經常遇到的問題，下面我們就來講解css的常見的一些佈局方式。 1.雙飛翼佈局（兩邊定寬，中間自適應） 主要是通過浮動與margin實現，程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
Android開發 之 view的幾種佈局方式及實踐
引言 通過前面兩篇： 我們對Android應用程式執行原理及佈局檔案可謂有了比較深刻的認識和理解，並且用“Hello World！”程式來實踐證明了。在繼續深入Android開發之旅之前，有必要解決前兩篇中沒有介紹的遺留問題：View的幾種佈局顯示方法，以後就不會在針對佈局方面做過多的介紹。View的佈局顯
探討“左右定寬，中間自適應”的幾種佈局方式
一、實現“左右定寬，中間自適應”三欄效果的5種方式 基本 DOM 結構： <article class="container"> <div class="left">this is left</div> <div class="center">thi
索引的幾種掃描方式
http table 技術分享 -1 9.png alt logs image 索引 索引的幾種掃描方式
使用mui框架打開頁面的幾種不同方式
oid 上拉加載 nload 用戶體驗 logs left bsp position wait 1.創建子頁面： list.html就是index.html的子頁面，創建代碼比較簡單，如下： mui.init({ subpages: [{
連接到Oracle的幾種命名方式
oracle 連接從事Oracle相關工作的人，每天都會使用各種工具連接到Oracle數據庫，比如：SQL*Plus、PL/SQL、TOAD、SQLDeveloper等等，下面就列舉了幾種連接到Oracle的方式，本例中使用的是SQL*Plus為例。1、Easy Connect命名方式這種方式是一種很簡單的方
使用java配置定時任務的幾種配置方式及示例
遞增 exc trigge strong trigger except 字符 ssi uart Spring定時器，主要有兩種實現方式，包括Java Timer定時和Quartz定時器！ 1.Java Timer定時 首先繼承java.util.TimerTask類實現
mysql的幾種啟動方式
sta allow status option 客戶端連接 mini all res 5.1 mysql的四種啟動方式: 1、mysqld 啟動mysql服務器:./mysqld --defaults-file=/etc/my.cnf --user=root 客戶端連接:
Python模塊常用的幾種安裝方式
author 位置 def 位操作 依賴關系 依賴 模塊 sys.path 此外 Python模塊安裝 一、 單文件模塊直接把文件拷貝到 $python_dir/Lib 二、 多文件模塊，帶setup.pypython setup.py install 三、 egg文件1)
JAVA獲取文件的幾種常用方式
ada col epo term 打印 core book port nbsp 1、user.dir System.out.println(System.getProperty("user.dir")); 此方獲取的是運行的路 比如 1、 2、如果在eclipse上運
單例模式的幾種實現方式
str 類加載 代碼 創建對象 stat 懶漢 導致 方法 不支持 1、懶漢式，線程不安全 是否 Lazy 初始化：是 是否多線程安全：否 實現難度：易 描述：這種方式是最基本的實現方式，這種實現最大的問題就是不支持多線程。因為沒有加鎖 synchronized，所以嚴格意
Selenium-幾種等待方式
什麽 頻率 一次 進行 utf 可執行 /usr baidu 超過 強制等待 一直使用的time.sleep(5),可以放在任意地方,不好的地方,不太準確確定時間 隱形等待 driver.implicitly_wait(5) 設置了一個最長等待時間,如果在規
jmeter ---json幾種讀取方式，ArrayList循環讀取
導入 一起 .com json數據格式 jmeter ips pos processor 直接 在之前寫過提取json數據格式的文章，這次對jmeter讀取json數據格式進行整理。 舉例一個接口的response 格式如下： { "data" : {
微軟 WCF的幾種寄宿方式，寄宿IIS、寄宿winform、寄宿控制臺、寄宿Windows服務
創建 src 體驗 ash pos 如果 理解 文件 .get WCF寄宿方式是一種非常靈活的操作，可以在IIS服務、Windows服務、Winform程序、控制臺程序中進行寄宿，從而實現WCF服務的運行，為調用者方便、高效提供服務調用。本文分別對這幾種方式進行詳細介紹並開
索引的幾種使用方式
查找 浪費 相對 掃描 遇到 l數據庫 系統 需求 mem HASH Hash這個詞，可以說，自打我們開始碼的那一天起，就開始不停地見到和使用到了。其實，hash就是一種（key=>value）形式的鍵值對，如數學中的函數映射，允許多個key對應相同的value，但不
c語言函數指針的幾種使用方式
log print 直接 pri turn [] get div c語言函數 1.直接定義函數指針賦值並使用。 #include <stdio.h> int max(int x, int y) { if (x > y) ret
分布式session的幾種實現方式
服務器 單點 redis 容易 穩定性 常用 str 廣播 cati 1.基於數據庫的session共享 2.基於NFS共享文件系統 3.基於memcached 的session，怎麽保證session的高可用 4.基於resin/tomcat web容器本身的sessio