1. 程式人生 > >談談關於前端開發網頁適配手機的相關設定

談談關於前端開發網頁適配手機的相關設定

雖然說本人是做前端開發的,但是也開發過幾個Android專案,還是比較關注移動端的,個人感覺以後用網頁開發手機App是一種趨勢,h5的興起也正說明了這一點,也正是有了h5,讓前端開發者也能開發手機,好了,廢話不多說,進入正題,對網頁的適配手機本人暫時用到了3中方式,3句程式碼,
第一句:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

暴力手段,強制讓網頁適配手機.就是說如果你用設計了一個網頁,然後加入這句程式碼,那麼你網頁上所有內容都擠在手機小小的螢幕上,這種方式本人一般用於網頁上的header和table;

第二句:

font-size: 1.3rem;

可能剛接觸前端的對rem可能不是很熟,但是,如果你想傾向於網頁開發App這一塊,那麼rem就是很重要的一塊,對於px我相信沒有人不認識,我們用px給文字設定大小的時候,不管你頁面怎麼放大縮小,字型大小都不會改變,而用rem設定大小,字型大小就會隨之縮放而改變,想要真正瞭解rem原理的百度更詳細.

第三句:

width :90%

設定頁面各個標籤的寬度大家都會,但是一般的用px絕對定位,假如用%,那麼你的標籤就不會超過你頁面的寬度.簡單的方法.以上方法隨具體情況而變,也能結合使用,對於以上純屬作者個人意見,說的比較膚淺,請有不同看法的大神指教.