h5移動端css開發總結

2021-10-06 22:40:10 字數 597 閱讀 7252

font-size


: 12px;


transform


:scale


(10/12)


;
需要注意這個方式雖然縮小了字型，但該文字元素所佔據的原寬高大小並不會跟著縮小，所以很多時候還需要考慮文字位置和間距的問題。

一般文字位置需要結合 transform-origin 屬性來設定。

例如設定文字水平居左、垂直居中：

transform-origin


: left center;
間距問題自己湊一湊調整一下就差不多了，個人覺得沒必要精確計算，必要時再結合position定位屬性控制。

.parent


.secondchild


.imgwrap


}
// 方法一：利用flex布局


.parent


// 方法二：利用定位及位移


.parent


.child
以上兩種方法都有一些不適用的場景：

移動端H5開發常用技巧總結

常用的meta屬性設定 meta對於移動端的一些特殊屬性，可根據需要自行設定 號碼識別 帶括號及加號的數字，形如 86 123456789 雙連線線的數字，形如 00 00 00111 11 位數字，形如 13800138000 關閉識別 開啟識別 123456 郵箱識別 android dooyo...

移動端h5開發基礎

移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度，縮放比例為1，禁止使用者縮放。用於檢測視口，主要的效果就是取消下面的滾動條，讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候，頁面也不會失真。三.相容手機螢幕大...

H5移動端適配總結

因此通過查閱資料，了解到兩種螢幕適配的方案 1.通過對介面進行等比例縮放 2.使用rem單位進行介面的適配。1 第一種方式屬於有一種暴力適配，即通過計算設計人員給出的設計稿的尺寸和裝置的真實尺寸，將這個比值作為縮放比賦值飛meta標籤，但是這種情況下往往會出現字型和的失真或者銳化。實現 大致如下 以...