目錄
移動端適配
01. **查詢 示例
檔位示例
02. rem
rem適配原理 示例
03. rem 應用
04. 實際應用
05. less的使用 安裝
變數 巢狀
運算06. 解決方案
方案1方案2（推薦!!!）
方案對比
**查詢
rem
作用：感受到螢幕的變化；可以根據螢幕不同的寬，從而獲得不同的樣式，然後實現不同的樣式顯示；
語法:
css樣式：
/*
mediatype 查詢型別:
\-----------------
all 所有裝置
print 用於印表機和列印預覽
screen 用於電腦螢幕，平板電腦，智慧型手機等。
條件:
\----
and 並且 not 不滿足 only 僅僅滿足
media feature 查詢條件:
\----------------------
width,min-with,max-width */
@media mediatype and|not|only (media feature)
例子:
如果文件寬度小於 500 畫素則修改背景顏色(background-color):
/* min-width/max-width：最小界值，最大界值；查詢條件包含等於號；*/
/* 寬度的最小界值500px，大於等於500px */
@media screen and (max-width:499px)
}
不同的是rem的基準是相對於html元素的字型大小，em是父元素字型大小。
作用：讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置。
方案：使用**查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大
小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
用法:
語法：
/* 1.根html 為 10px */
html
/* 2.此時 div 的寬就是 150px */
div
@media screen and (min-width: 320px) }
@media screen and (min-width: 640px) }
div
1rem背後代表的值:
// 我們此次定義的劃分的份數 為 10 這個過程在計算 1個rem 在不同檔位下是多大；
@media screen and (min-width: 320px) }
@media screen and (min-width: 360px) }
@media screen and (min-width: 540px)
}
//@變數名:值;
@bg:#333;
.box_1
.box_2
/* css 寫法 */
\#header .logo
/* less 寫法 */
\#header
}
/* css寫法 */
a:hover
/* less寫法 */
a }
// 數字
width: 200px - 50;
// 顏色
background-color: #666 - #222;
// 注意：運算子中間左右有個空格隔開 1px * 5
rem+flflexible.js+less
flexible.js
1rem背後代表的值
function setrem ()統一替換：100px=100/43rem;
前端技術 四 移動端適配
通過 查詢可以檢測當前網頁執行在什麼終端，可以有機會實現網頁適應不同終端的展示風格。關鍵字將 型別或多個 特性連線到一起做為 查詢的條件。引入方式 1.link標籤引入 12.css方式 media only screen and max width 640px 其它任意樣式表 123456常用特性...
前端 移動端適配
參考部落格 移動前端自適應適配布局解決方案 使用flex彈性布局，元素寬度自適應，高度固定為某個px值。這種適配方式是以html的font size值為基礎，所有元素的畫素大小都使用rem表示 除了font size以外 固定視口，縮放值為1.0 計算基礎font size值font size值的計...
移動端適配之rem
現在手機業務的逐漸發展，移動端的業務原來越多，但是我們的手機品牌有很多，同乙個牌子又有很多不同的型號，比如iphone就有從iphone iphonex多種型號，每種不同型號的手機螢幕大小也不盡相同，很多時候要做適配。總結一下目前個人用的幾種適配方式 1.js less 首先在頁面的頭部加上這麼一段...