前端基礎之-響應式，flex，適配（px、em、rem、%、vm）
響應式-@media
響應式就是一個網站可以兼容多個終端—而不是爲每一個終端作一個特定的版本（響應式開發一套界面）；隨之而來的就是咱們熟知的自適應，自適應設計指能使網頁自適應顯示在不一樣大小終端設備上新網頁設計方式及技術（須要開發多套界面）。
不一樣點
- 自適應設計 經過檢測視口分辨率，來判斷當前訪問的設備是：pc端、平板、手機，從而請求服務層，返回不一樣的頁面；響應式設計經過檢測視口分辨率，針對不一樣客戶端在客戶端作代碼處理，來展示不一樣的佈局和內容。
- 自適應 對頁面作的屏幕適配是在必定範圍：好比pc端（>1024）一套適配,平板（768-1024）一套適配，手機端（<768）一套適配;響應式一套頁面所有適配。（能夠想象：響應式設計要考慮的內容要比自適應設計複雜的多）
共同點
二者都是優化適應互聯網中愈來愈分化的視口瀏覽體驗，而出現的爲視口提供更好的體驗的技術。用技術來使頁面適應不一樣分辨率的視口的設計。
響應式優缺點和標誌
標誌
麪包屑菜單 改變瀏覽器寬度會在不一樣分辨率下顯示不一樣的佈局
優勢：
面對不一樣分辨率設備靈活性強 可以快捷解決多設備顯示適應問題
缺點：
僅適用佈局、信息、框架並不複雜的部門類型網站 兼容各類設備工做量大，效率低下 代碼累贅，會出現隱藏無用的元素，加載時間加長 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果 必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況
自適應網站優缺點和標誌
標誌
大多隻是適配單個終端的主流N個主流視口（2-3個） 當視口大小低於設置的最小視口時，界面會出現顯示不全，溢出，並出現橫向滑動指示器（主要 出如今pc端，移動端決不容許出現這種狀況） 整體框架不變，橫線佈局的板塊大多會有所減小
優勢
對網站的複雜程度兼容性更大 實施起來代價更低， 代碼更高效 測試更容易，運營相對更精準（圖片可控性更高）
缺點：
在移動端設計大行其道之下，同一個網站，每每須要爲不一樣的設備開發不一樣的頁面，增長開發成本 當需求改變時，可能會改動多套代碼。流程繁瑣。
響應式引入方式
1.外部引入：javascript
<link href="url" media="screen and (min-width:0px) and (max-width:400px)"></link>
2.內部：css
@media screen and (min-width:0px) and (max-width:400px){
//style樣式
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應式佈局</title>
<style>
/*基本樣式*/
body {
margin: 0;
padding: 0;
background-color: #ddd;
}
.side {
height: 300px;
background-color: #4eb3b9;
}
.main {
height: 300px;
background-color: #ff0097;
}
/*device-width: >= 1000px*/
@media screen and (min-width: 1000px) {
.parent {
width: 960px;
margin: 0 auto;
}
.side {
width: 300px;
height: 300px;
background-color: #4eb3b9;
float: left;
}
.main {
width: 650px;
height: 300px;
margin-left: 10px;
background-color: #ff0097;
float: left;
}
}
/*device-width:400px-1000px*/
@media screen and (min-width: 400px) and (max-width: 1000px) {
.parent {
display: flex;
}
.side {
width: 300px;
}
.main {
flex: 1;
margin-left: 10px;
}
}
/*device-width: <= 400px*/
@media screen and (max-width: 400px) {
.parent {
display: flex;
flex-flow: column wrap;
}
.side {
flex: 1;
margin-bottom: 10px;
}
.main {
flex: 1;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
</body>
</html>
flex彈性盒模型佈局
1、html
flex-wrap: nowrap (不換行，主軸方向空間不足默認壓縮伸縮項目)
flex-wrap: wrap (換行，主軸方向空間不足換行)
flex-direction : (設置主軸的排列方向，規定了flex-start 和 flex-end的位置)
row -- 行模式
column -- 列模式
2、沿主軸或者側軸排列伸縮項目
justify-contentjava
- 控制伸縮項目在伸縮容器中，主軸(main)的排列方式。
align-itemscss3
- 控制伸縮項目在伸縮容器中，側軸(cross)的排列方式。
align-content:web
- 控制伸縮項目，在在伸縮容器中，側軸(cross)的排列方式
前提條件：
1.必須有兩行或者以上。
2.flex-wrap: wrap
3.設置伸縮項目，伸縮容器的寬度，致使水平空間不足。
3、設置伸縮項目的排列順序，沿着側軸對齊，壓縮率等
align-self瀏覽器
- 伸縮項目本身決定在伸縮容器中 ，側軸(cross)的排列方式 - 只能設置在 伸縮項目 中。
flex-growapp
- 分配伸縮容器的剩餘空間 - 只能設置在 伸縮項目 中。
order框架
- 設置伸縮項目在 伸縮容器 排列順序 (flex-direction 決定排列方向)
- 只能設置在 伸縮項目 中。
flex-shrink: 壓縮率 正整數 0 不壓縮， 默認是1.
flex-basis: 伸縮項目 初始化的寬度 = widthiphone
相關連接：連接描述
適配
想要了解適配，固然少不了跟適配相關的一些基礎概念了呢
像素的相關概念
屏幕尺寸、屏幕分辨率、屏幕像素密度
屏幕尺寸：
指屏幕的對角線的長度，單位是英寸，1英寸=2.54釐米。
常見的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。
屏幕分辨率：（iphone6 750*1334）
指在橫縱向上的像素點數，單位是px，1px=1個像素點。通常以縱向像素*橫向像素來表示一個手機的分辨率，如1960*1080。（這裏的1像素指的是物理設備的1個像素點）
屏幕像素密度/像素密度/屏幕密度：
屏幕上每英寸能夠顯示的像素點的數量，單位是ppi，即「pixels per inch」的縮寫。
屏幕像素密度與屏幕尺寸和屏幕分辨率有關
物理像素,CSS像素
設備像素/物理像素：（分辨率）
買手機的時候會有一個 n x m 的分辨率，那是屏幕的n x m個呈像的點，一個點（小方格）爲一個物理像素。（它是屏幕能顯示的最小粒度）
設備像素也被稱爲物理像素,他是顯示設備中一個最微小的物理部件。
每一個像素能夠根據操做系統設置本身的顏色和亮度。
任何設備的物理像素的數量都是固定的
CSS像素：
CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（肯定）Web頁面上的內容。
它是爲web開發者創造的，在css或者javascript中使用的一個抽象的層
通常狀況下，CSS像素被稱爲與設備無關的像素（device-independent像素），簡稱爲「DIPs」。
在一個標準的顯示密度下(普通屏)，一個CSS像素對應着一個設備像素。
css像素與物理像素的關係
一個width爲200px的元素，它佔據了200個css像素，但200個css像素佔據多少個物理像素取決於 屏幕的特性（是不是高密度,即像素比）和用戶的縮放行爲。
在蘋果的視網膜屏幕上，視網膜的像素密度是普通屏幕的兩倍，這個元素就跨越了400個設備像素
若是用戶放大，它將跨越更多的設備像素
設備獨立像素：設備獨立像素(也叫密度無關像素)，能夠認爲是計算機座標系統中得一個點，
這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，而後由相關係統轉換爲物理像素。
位圖像素：一個位圖的像素是柵格圖像(如：png, jpg, gif等)最小的數據單元
1個位圖像素對應於1個物理像素，圖片才能獲得完美清晰的展現
對於web開發者而言：
咱們使用的每個css和javascript定義的像素本質上表明的都是css像素，咱們在開發過程當中並不在乎一個css像素到底跨越了多少個設備像素。咱們將這個依賴於屏幕特性和用戶縮放程度的複雜計算交給了瀏覽器。
像素比
像素比:它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /獨立像素 window.devicePixelRatio
視口和瀏覽器窗口
在普通的桌面端，視口的默認寬度和瀏覽器窗口的寬度一致。
在移動端,瀏覽器廠商面臨着一個比較大的問題,他們如何將數以萬計甚至能夠說是數以億計的pc端網頁完整的
呈如今移動端設備上,而且不會出現橫向滾動條?
若是這個時候,視口的寬度仍是和瀏覽器窗口的寬度一致?咱們都知道pc端網頁通常都爲960px或者1024px，
那麼要完整的放下它們，咱們移動端瀏覽器必需要有個容器放下它吧，並且只有有了這個容器咱們才能很好的規定到底我移動端的
瀏覽器到底能放下多大的頁面吧（可能大於960 頁可能大於1024）。這個數值最好大於960，並且設備間的這個容器大小是沒有
太大差別的
並且基於用戶體驗咱們更關心width
移動端瀏覽器廠商是否是得作點什麼了（這個容器應該由瀏覽器廠商設置）
在pc端：
咱們瀏覽器的視口（初始包含塊，視口）是要小於咱們的屏幕的，通常默認狀況下是等於
在移動端：
咱們瀏覽器的視口（佈局視口）是要遠大於咱們的屏幕的獨立設備像素的
移動端瀏覽器廠商要實現的目標：
在小屏幕的移動設備上，儘量的縮小網站來讓用戶看到網站的全貌
他們作到了，可是問題又來了：
在小屏幕的移動設備上，若是設備屏幕視口的寬度和瀏覽器窗口的寬度同樣會致使很醜陋的結果，全部的佈局都會被壓在一塊兒。
因此在移動端瀏覽器上遇到一個沒有爲移動端作優化的網站，它會盡量的縮小網站來讓用戶看到網站的全貌。這對用戶的體驗來講，是一件很是可怕的事情。若是你想在一個小小的手機屏幕上顯示一個爲桌面設計的網站，你必須得捨棄一些佈局。
layout viewport和visual viewport
layout viewport:
手機上，爲了容納爲桌面瀏覽器設計的網站，默認的佈局視口的寬度遠大於屏幕的寬度
佈局視口的出現，在極大程度上幫助了桌面網站到移動設備上的轉移。
能夠經過document.documentElement.clientWidth來獲取
在pc端，單獨一個width爲20%的元素最終拿到的值要根據初始包含塊的width來決定，由於咱們橫向的佈局都是
按初始包含塊開始填的，在移動端同樣，不過咱們這個時候應該叫它佈局視口。
visual viewport:
視覺視口與設備屏幕同樣寬，而且它的css像素的數量會隨用戶的縮放而改變
visual viewport的寬度能夠經過window.innerWidth 來獲取，
但在Android 2, Oprea mini 和 UC 8中沒法正確獲取。
理想視口
咱們分析知道：佈局視口的默認寬度並非一個理想的寬度，對於咱們移動設備來講，最理想的狀況是 用戶剛進入頁面時再也不須要縮放。這就是爲何蘋果和其餘效仿蘋果的瀏覽器廠商會引進理想視口！ 只有是專門爲移動設備開發的網站，他纔有理想視口這一說。並且只有當你在頁面中加入viewport的meta標籤，理想視口才會生效。 <meta name="viewport" content="width=device-width" /> 這一行代碼告訴咱們，佈局視口的寬度應該與理想視口的寬度一致 css傳統的單位有：px、%、em，而隨着技術的發展，css3增長了一些新的單位rem、vh、vw、vm等，使咱們的web頁面能適應各類不一樣的終端顯示，如今咱們來看看這些單位的區別，這樣對後面進行視口之間的適配有直接的幫助 - pixel（像素）是圖像的基本採樣單位。因此它不是一個肯定的物理量，也不是一個具體的點或者小方塊（儘管能夠用點和小方塊來呈現），而是一個抽象概念,單位面積內的像素，可大可小,是相對於顯示器屏幕分辨率而言的.用PX設置字體大小時，比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，若是改變了瀏覽器的縮放，這時會使用咱們的Web頁面佈局被打破. - em相對長度單位。em是相對於父元素的font-size而計算的。若是當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體(16px)尺寸。 這樣就會存在一個問題，進行任何元素都要根據其父元大小設置。 - Rem是相對於根元素html字體大小，這樣就意味着，咱們只須要在根元素肯定一個參考值。 - %通常來講是相對於父元素來說 - viewpoint width（vw），視窗寬度，1vw等於視窗寬度的1%。若是瀏覽器的寬是500px, 1vw爲5px(還有vh等)（儘管%和vw在不少地方都很類似 在使用的過程當中仍是要注意 在出現豎向滾動條的時候vw=%+滾動條的寬度）。
viewport適配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<!--
UI 給你一張設計圖 320px
320px變成屏幕寬度
圖片 會失真
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var targetW = 320;
var width = document.documentElement.clientWidth;
var scale = width/targetW;
var metaNode = document.querySelector('meta[name = "viewport"]');
metaNode.setAttribute('content','initial-scale='+scale);
</script>
</html>
相關連接：連接描述
rem適配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<!--
爲何要適配：
要實現等比！（若是屏幕是寬度320px,那麼元素寬度爲160px,佔據就是一半，在各個設備上都是同樣）
等比是實質：一個css像素在不一樣機型上，所包含是物理像素不一樣，實現等比
默認狀況等不等比：
不加meta標籤時是等比的
加了meta標籤後：
不能等比了 一個css像素所佔據的物理像素的個數肯定了
-->
<!--
rem適配的本質：
rem參照根元素字體
無論視圖多大，在不一樣機型上，1rem等於視圖的寬度
因此，根標籤的font-size改爲佈局視口的大小
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 8rem;
height: 8rem;
background: burlywood;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
// var width = document.documentElement.clientWidth;
// var html = document.querySelector('html');
// html.style.fontSize = width + 'px';
(function(){
var styleNode = document.createElement('style');
var width = document.documentElement.clientWidth;
styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
document.head.appendChild(styleNode);
})();
</script>
</html>
上下左右居中的幾種實現。
通過上面一頓暈頭轉向的理解，接下來看幾個經常使用的居中形式吧（工做中確定常常碰到的） 是否是覺得我又會長篇大論，纔不會， 我沒這麼傻， 來老鐵--> [連接描述][3] https://blog.csdn.net/mars2009/article/details/79683924
Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現
相關文章
- 1. 響應式佈局之 px、em、 rem
- 2. 前端響應式佈局基礎——rem
- 3. 前端適配rem和px問題
- 4. rem、px、em
- 5. em rem px
- 6. px，em，rem
- 7. px，em和rem
- 8. react適配 rem px to rem
- 9. css3 px、em和rem
- 10. vw，vh，px，%，em，rem
- 更多相關文章...
- • 如何僞造ARP響應？ - TCP/IP教程
- • HTTP 響應頭信息 - HTTP 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 響應式佈局之 px、em、 rem
- 2. 前端響應式佈局基礎——rem
- 3. 前端適配rem和px問題
- 4. rem、px、em
- 5. em rem px
- 6. px，em，rem
- 7. px，em和rem
- 8. react適配 rem px to rem
- 9. css3 px、em和rem
- 10. vw，vh，px，%，em，rem