移動端web開發

2022-02-25 11:32:54 字數 1034 閱讀 3903

領導要求公司**要做個移動版,查詢相關的資料,以下簡單的總結供領導看。

在使用者訪問的時候,先判斷下是pc端還是移動端,是移動的話就是來訪問移動端web頁面。當然的也可以做成pc端和移動端都通用的,但在做的過程中一定會遇到很多問題,一次就做成這樣,心裡沒有太大的把握。就是先做乙個,總結一下經驗。

1.先從**整體的布局來講,整個採用流體布局,不設定固定寬度,百分比寬度(目標元素寬度/上下文元素寬度=百分比寬度)+容器浮動,字型大小採用em,到時候有些地方我們根據不同的解析度的手機做幾個樣式,整個**的內容要減少一些,主要都展示出來就可以。

/* ipad及以下,所有小於(不等於)960寬度的平板電腦*/

@media only screen and (max-width: 959px) {}

/* 僅ipad豎版,所有小於(不等於)960寬度的平板電腦的豎版*/

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

/* iphone及以下*/

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

/* 僅iphone橫版,包括某些平板電腦的豎版*/

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

/* 僅iphone4 豎版*/

@mediaonly screen and (max-width: 479px) {}

2.首頁的幻燈現在有兩個實現的方式,

一種才用**ued開發的乙個slide,這個是一句yui開發的,這樣的話整個js這塊就都要考慮用這個yui來做。

3.最主要的是怎麼載入資料,一種就是還是用原來的**開發語言去做,另一種就是採用用原來的開發語言返回乙個json資料,前端頁面用ajax,我了解的移動web應好像是用的ajax做的

相關學習記錄

自適應網頁設計(responsive web design)

responsive design資源之一:學習線路

移動端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開發

移動端web開發與pc端的web開發有尺寸上的不同,手機螢幕大小有很多種,因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...

移動端web開發

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