移動端Web開發

2021-08-15 07:44:49 字數 629 閱讀 7302

移動端web開發與pc端的web開發有尺寸上的不同,手機螢幕大小有很多種,因此尺寸方面有些要注意的。

1.字型  採用js動態設定字型大小的方法

思路如下:螢幕寬度》640px,  則font-size=100px;

螢幕寬度<=640px,則font-size=100*寬度/640px;

字型單位為rem  在body中設定好font-size:625%,這樣1rem = 100px;

2.百分比布局

body設定好width=100% height=100%

控制項寬度=控制項寬/總寬度;

控制項高度=控制項高/父元素高度

margin-top,margin-bottom,padding-top,padding-bottom,

margin-left,margin-right,padding-left,padding-right

*******值設定為設計稿margin(padding)/總寬********

3.各種css屬性的注意事項

line-height:28px  表示行高為28px

line-height:120% 表示行高為當前字型的120%

line-height:2.6rem 表示行高為當前字型的2.6倍

移動端web開發

viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比,大於0的數字 ma...

移動端web開發

互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size,基值設dev...

移動端web開發

領導要求公司 要做個移動版,查詢相關的資料,以下簡單的總結供領導看。在使用者訪問的時候,先判斷下是pc端還是移動端,是移動的話就是來訪問移動端web頁面。當然的也可以做成pc端和移動端都通用的,但在做的過程中一定會遇到很多問題,一次就做成這樣,心裡沒有太大的把握。就是先做乙個,總結一下經驗。1.先從...