H5技術乾貨

時間 2019-11-09

標籤 h5 技術乾貨简体版

原文原文鏈接

H5技術乾貨javascript

meta標籤相關知識css

H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面html

viewport模板android

<!DOCTYPE html>ios

<html>web

<head>編程

</head>

<body>

這裏開始內容

</body>

</html>

width：viewport的寬度

height：viewport的高度

initial-scale：初始的縮放比例

minimum-scale：容許用戶縮放到的最小比例

maximum-scale：容許用戶縮放到的最大比例

user-scalable：用戶是否能夠手動縮放

添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

IOS中Safari容許全屏瀏覽：

IOS中Safari設置保存到桌面圖標

須要在網站的根目錄下存放favicon圖標，防止404請求(使用fiddler能夠監聽到)

百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

百度SiteApp轉碼聲明

在html裏面插入圖片，若是想讓圖片自適應屏幕的小而不是寬高固定不變能夠在css代碼里加入img

{ height: auto; width: auto\9; width:100%; }

設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

content 參數：

default ：狀態欄背景是白色。

black ：狀態欄背景是黑色。

black-translucent ：狀態欄背景是半透明。若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

啓用 WebApp 全屏模式（IOS）

當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

ios中Safari頂端狀態條樣式：

當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari <meta name="apple-mobile-web-app-capable" content="yes" />

關閉iOS鍵盤首字母自動大寫

在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是啓用這個功能，能夠這樣

關閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣，IOS還作了一個功能，默認輸入法會開啓自動修正輸入內容，這樣的話，用戶常常要操做兩次。若是不但願開啓此功能，咱們能夠經過input標籤屬性來關閉掉：

==》<input autocapitalize="off" autocorrect="off" />

禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：

html { -webkit-text-size-adjust: 100%; }

須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 `meta viewport’。

移動端如何清除輸入框內陰影

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

input, textarea {

border: 0;

-webkit-appearance: none;

}

textarea這個標籤，具備默認樣式

-webkit-appearance: none; 經過這個屬性能夠取消；

忽略頁面的數字爲電話，忽略email識別

指定下拉刷新獲取高度的兼容性，低版本的安卓（小米）不支持touchend事件；咱們寫在touchmove事件裏面；

var scroll=document.documentElement.scrollTop||document.body.scrollTop;//滾動的距離

var win=document.documentElement.clientHeight||document.body.clientHeight;//窗口的高度

var scrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight;//文檔總高度

快速回彈滾動

咱們先來看看回彈滾動在手機瀏覽器發展的歷史：

早期的時候，移動端的瀏覽器都不支持非body元素的滾動條，因此通常都藉助 iScroll;

Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能經過2個手指進行滾動；

Android 4.0解決了滾動條不可見及增長了快速回彈滾動效果，不過隨後這個特性又被移除；

iOS從5.0開始解決了滾動條不可見及增長了快速回彈滾動效果

在iOS上若是你想讓一個元素擁有像 Native 的滾動效果，你能夠這樣作：

.xxx {

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

}

PS：iScroll用過以後感受不是很好，有一些詭異的bug，這裏推薦另一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），並且還有回彈滾動的內置滾動條，官方地址：

iDangero

移動端禁止選中內容

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

.user-select-none {

-webkit-user-select: none; /* Chrome all / Safari all */

-moz-user-select: none; /* Firefox all （移動端不須要） */

-ms-user-select: none; /* IE 10+ */

}

從新定義滾動條的樣式：

webkit如今支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定義樣式。

::-webkit-scrollbar {width: 12px;}定義滾動條的寬度；

::-webkit-scrollbar-track {background-color: #eaeaea;border-left: 1px solid #ccc;}定義滾動條的背景

::-webkit-scrollbar-thumb {background-color: #ccc;}上下箭頭

::-webkit-scrollbar-thumb:hover {background-color: #aaa;}

::-webkit-scrollbar-thumb:active{background-color:#333;}

按鈕active態:

在iOS系統的移動設備中，須要在按鈕元素或body/html上綁定一個touchstart事件才能激活:active狀態

ios android判斷；

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

//console.log($('.input_pass').css({'font-size':'100%','letter-spacing':'19px','top':'0px'}));

} else if (/(Android)/i.test(navigator.userAgent)) {

$('.pwd_outer .input_pass').css({'fontSize':'24px','letter-spacing':'22px'});

} else {

//console.log('我是其餘');

};

移動端取消touch高亮效果在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來禁止：

.xxx {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，

<!DOCTYPE html>

<html>

<head>

a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}

.btn-blue:active{background-color: #357AE8;}

</style>

</head>

<body>

document.addEventListener("touchstart", function(){}, true)

</script>

</body>

</html>

兼容性ios5+、部分android 4+、winphone 8

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名

<!DOCTYPE html>

<html>

<head>

a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}

.btn-blue-on{background-color: #357AE8;}

</style>

</head>

<body>

var btnBlue = document.querySelector(".btn-blue");

btnBlue.ontouchstart = function(){

this.className = "btn-blue btn-blue-on"

}

btnBlue.ontouchend = function(){

this.className = "btn-blue"

}

</script>

</body>

</html>

移動端基礎框架

zepto.js 語法與jquery幾乎同樣，會jquery基本會zepto~

iscroll.js 解決頁面不支持彈性滾動，不支持fixed引發的問題~ 實現下拉刷新，滑屏，縮放等功能~

underscore.js 該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。

fastclick 加快移動端點擊響應時間

animate.css CSS3動畫效果庫

Normalize.css Normalize.css是一種現代的、CSS reset爲HTML5準備的優質替代方案

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper

如何禁止保存或拷貝圖像（IOS）

一般當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：

img { -webkit-touch-callout: none; }

如何禁止保存或拷貝圖像一般當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：

img {

-webkit-touch-callout: none;

}

PS：須要注意的是，該方法只在 iOS 上有效。

解決字體在移動端比例縮小後出現鋸齒的問題：

-webkit-font-smoothing: antialiased ;

柵格佈局：

box-sizing:border-box;能夠改變盒子模型的計算方式方便你設置寬進行自適應流式佈局

input[type=input]{-webkit-appearance:none;}移除ios的樣式，但這個屬性存在bug，會致使iso沒法獲取checkbox值，給這個元素從新賦上input[type=checkbox]{-webkit-appearance:checkbox;}就不會報錯了。

webkit表單輸入框placeholder的文字能換行麼? ios能夠，android不行~

移動端手機號碼識別（IOS）

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

7位數字，形如：1234567

帶括號及加號的數字，形如：(+86)123456789

雙鏈接線的數字，形如：00-00-00111

11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

開啓電話功能

開啓短信功能： winPhone無效

移除原生控件樣式

input,button,textarea{-webkit-appearance:none;}

ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

部分android系統中元素被點擊時產生的邊框怎麼去掉

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0)

-webkit-user-modify:read-write-plaintext-only;

}

winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

按鈕被按下效果的實現須要給a標籤加a:active屬性和添加一段空函數

document.body.addEventListener('touchend', function () { });

-webkit-border-bottom:none;解決去掉下邊框。

字體大小盡可能使用em或者rem，代替px。

移動端字體單位font-size選擇px仍是rem

對於只須要適配手機設備，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。

如下是歷史緣由：

2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

解決方案：

fastclick能夠解決在手機上點擊事件的300ms延遲

zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

觸摸事件的響應順序

一、ontouchstart

二、ontouchmove

三、ontouchend

四、onclick

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

如下支持webkit

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指

touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動

touchend——當手指離開屏幕時觸發

touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

如下支持winphone 8

MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指

MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動

MSPointerUp——當手指離開屏幕時觸發

click產生200-300 ms的延遲響應:

頁面js捕獲click事件的回調函數處理，須要300ms後才生效

解決方案：

一、fastclick能夠解決在手機上點擊事件的300ms延遲

二、zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

取消表單元素在點擊態時的邊框以及半透明灰色背景

input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

webkit表單元素的默認外觀怎麼重置

.css{-webkit-appearance:none;}

修改webkit表單輸入框placeholder的樣式顏色值

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

移動端定義字體，移動端沒有微軟雅黑字體

對於網站字體設置

移動端項目：

font-family:Tahoma,Arial,Roboto,」Droid Sans」,」Helvetica Neue」,」Droid Sans Fallback」,」Heiti SC」,sans-self;

移動和pc端項目：

font-family:Tahoma,Arial,Roboto,」Droid Sans」,」Helvetica Neue」,」Droid Sans Fallback」,」Heiti SC」,」Hiragino Sans GB」,Simsun,sans-self;

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

忽略android平臺中對郵箱地址的識別

移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

使用流體圖片

img｛

max-width:100%;

widht:auto\9;

height:auto;

｝

不定寬高的水平垂直居中

.xxx{

position:absolute;

top:50%;

left:50%;

z-index:3;

-webkit-transform:translate(-50%，-50%)；

border-radius:6px;

background:#fff;

}

[flexbox版]不定寬高的水平垂直居中

.xx{

justify-content:center;//子元素水平居中，

align-items:center;//子元素垂直居中;

display:-webkit-flex;

}

//單行文本溢出

.xx{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

//多行文本溢出

.xx{

display:-webkit-box !importmort;

overflow:hidden;

text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;(數字2表示隱藏兩行)

}

禁用 radio 和 checkbox 默認樣式

select::-ms-expand {

display: none;

}

::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

::-ms-check 適用於表單複選框或單選按鈕默認圖標的修改，一樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，一樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{

display: none;

}

禁用PC端表單輸入框默認清除按鈕

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

阻止屏幕旋轉時字體自動調整

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

屏幕旋轉的事件和樣式

事件

window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert("橫屏:" + window.orientation);

case 0:

case 180:

alert("豎屏:" + window.orientation);

break;

}

樣式

//豎屏時使用的樣式

@media all and (orientation:portrait) {

.css{}

}

//橫屏時使用的樣式

@media all and (orientation:landscape) {

.css{}

}

audio元素和video元素在ios和andriod中沒法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){

audio.play()

})

可參考《沒法自動播放的audio元素》

搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。

手機拍照和上傳圖片

<input type="file">的accept 屬性

使用總結：

ios 有拍照、錄像、選取本地圖片功能

部分android只有選取本地圖片功能

winphone不支持

input控件默認外觀醜陋

微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整緣由

anroid側是複寫了layoutinflater 對textview作了統一處理

ios側是修改了body.style.webkitTextSizeAdjust值

普通解決方案：

android暫無方案

ios使用-webkit-text-size-adjust禁止調整字體大小

body{-webkit-text-size-adjust: 100%!important;}

最好的解決方案：整個頁面用rem或者百分比佈局

消除transition閃屏

網絡都是這麼寫的，但我並無測試出來

.css{

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

}

設計高性能CSS3動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位

利用translate3D開啓GPU加速

參考《High Performance Animations》

android 2.3 bug

@-webkit-keyframes 須要以0%開始100%結束，0%的百分號不能去掉

after和before僞類沒法使用動畫

border-radius不支持%單位

translate百分比的寫法和scale在一塊兒會致使失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫

同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分

部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色

參考《border-radius 移動之傷》

fixed bug

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位

android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位

ios4下不支持position:fixed

添加到主屏後的APP圖標

指定web app添加到主屏後的圖標路徑，有兩種略微不一樣的方式：

apple-touch-icon：在IOS6及如下的版本會自動爲圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格）

apple-touch-icon-precomposed：使用「設計原圖圖標」

效果：

圖標尺寸：

可經過指定size屬性來爲不一樣的設備提供不一樣的圖標（但一般來講，咱們只需提供一個114 x 114 pixels大小的圖標便可）

官方說明以下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

57 x 57 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

IOS Web app啓動動畫

因爲iPad 的啓動畫面是不包括狀態欄區域的。因此啓動圖片須要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小

（landscape：橫屏 | portrait：豎屏）

開啓硬件加速

解決頁面閃白

保證動畫流暢

.css {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

一像素邊框

.xx li + li:bofore{

position:absolute;

top：-1px;

left:0px;

content:' ';

width:100%;

height:1px;

border-top:1px solid #ddd;

-webkti-transform:scaleY(0.5);

}

針對適配等比縮放的方法:

@media only screen and (min-width: 1024px){

body{zoom:3.2;}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

body{zoom:2.4;}

}

@media only screen and (min-width: 640px) and (max-width: 767px) {

body{zoom:2;}

}

@media only screen and (min-width: 540px) and (max-width: 639px) {

body{zoom:1.68;}

}

@media only screen and (min-width: 480px) and (max-width: 539px) {

body{zoom:1.5;}

}

@media only screen and (min-width: 414px) and (max-width: 479px) {

body{zoom:1.29;}

}

@media only screen and (min-width: 400px) and (max-width: 413px) {

body{zoom:1.25;}

}

@media only screen and (min-width: 375px) and (max-width: 413px) {

body{zoom:1.17;}

}

@media only screen and (min-width: 360px) and (max-width:374px) {

body{zoom:1.125;}

}

使用rem來作響應式開發

針對不一樣的設備，對頁面rem作不一樣的縮放

html{

font-size:$baseFontSize;

@media screen and(min-width:320px){

font-size:$baseFontSize*.9;

}

@media screen and(min-width:360px){

font-size:$baseFontSize;

}

@media screen and(min-width:400px){

font-size:$baseFontSize*1.1;

}

rem配置參考：

html {font-size:10px}

@media screen and (min-width:480px) and (max-width:639px) {

html {

font-size: 15px

}

@media screen and (min-width:640px) and (max-width:719px) {

html {

font-size: 20px

}

@media screen and (min-width:720px) and (max-width:749px) {

html {

font-size: 22.5px

}

@media screen and (min-width:750px) and (max-width:799px) {

html {

font-size: 23.5px

}

@media screen and (min-width:800px) and (max-width:959px) {

html {

font-size: 25px

}

@media screen and (min-width:960px) and (max-width:1079px) {

html {

font-size: 30px

}

@media screen and (min-width:1080px) {

html {

font-size: 32px

}

經常使用公用CSS style

.clear { zoom:1; }

.clear:after { content:''; display:block; clear:both; }

.boxSiz{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

.toWrap{

word-break: break-all;

word-wrap: break-word;

white-space: pre-wrap;

}

.noWrap{

white-space:nowrap;

}

.noWrapEllipsis{

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

}

.text-justify{

text-align:justify;

text-justify:inter-ideograph;

}

.XX{

over-flow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.XX{

display:-webkit-box !importmort;

over-flow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;//這裏的2指的是行數

}

.flex-center{

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -o-box;

display: box;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-o-box-pack: center;

box-pack: center;

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-o-box-align: center;

box-align: center;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。