移動端開發的注意事項

2021-09-28 21:47:48 字數 410 閱讀 7488

1、把viewport設定成裝置的實際畫素

標籤中加入:

a.移動端單獨使用一套資源時:

直接對css進行編寫,在瀏覽器進行除錯的時候切換至手機螢幕進行顯示。

b.pc端與移動端使用同一套資源時:

在css中寫入:

@media (max-width: 500px)
這樣在螢幕小於500px的時候,使用的都是上面所寫的css樣式。

在適用多套裝置的時候,可以寫入:

@media (min-width: 500px) and (max-width: 800px)
這樣在螢幕尺為500px到800px的時候,使用的是css樣式2。

移動端注意事項

移動端 1,高度不是按百分比設定,而是直接設定高度px或者em,百分比容易變形 2,寬度按照百分比來衡量 3,一般父級div不直接設定寬高,而是由子級div撐起來 4,對相同元素不同機型樣式適配用 查詢,即 media 推薦文章 1 查詢1 2 查詢25,如何讓子級div相對於父級div垂直居中 p...

移動開發注意事項

例如 給div 加邊框 或者加padding,左滑才能看到右邊盡頭 加上樣式box sizing border box 但是對於外邊距margin無效 less是一種css語言的預處理器。通俗的說,css預處理器是一種專門編寫css 的語言 工具 通過less來編寫css 變得更靈活,更高效,更容易...

移動端h5開發注意事項

移動端h5開發注意事項 1.開發時小比較多,所以我使用絕對定位的次數比較多,絕對定位時盡量根據top進行定位,bottom定位在移動端下方出現時橫條時,會讓樣式錯亂。2.布局方面我是用的是rem 查詢 我看也有用寫一段js指令碼實現rem的,這種方式在一定條件很精準,但在螢幕很寬而長度很短時會有一點...