對於這次移動端頁面開發,新接觸到的東西不少,首要的乙個就是響應式布局,在移動頁面開發中,需要考慮到移動端各種不同的螢幕大小而使用不同的布局來呈現出想要的效果.在小螢幕的移動裝置中.可能需要減少頁面中的資訊量,並且改變原有的布局方案,採用適用於移動端的布局方案.而在中等螢幕大小的移動裝置中,如平板,則需要考慮橫屏,豎屏等情況下的布局方案.由這些需求誕生出來的,就是所謂的響應式布局解決方案,響應式布局重點在於可以通過**查詢來為不同螢幕大小的裝置使用不同的css樣式,在這種情況下就能夠直接做到適應不同螢幕大小的裝置,而不用為不同的裝置寫不同的頁面,只需要乙個html檔案和css檔案就能搞定.
要使用響應式布局首先需要在頁面頭部的元資料標籤中設定viewport,並在其中設定響應式布局所需要的一系列引數."viewport"設定好後就可以在css中寫入**查詢來為不同螢幕大小的裝置使用不同的布局方案.
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
meta
name
="viewport"
content
="width=device-width,maximum-scale=1,user-scalable=no"
>
6<
title
>title
title
>
7<
style
type
="text/css"
>
8div
9@media(min-width:768px) and (max-width:1024px)11}
12@media (max-width: 768px) 14}
15style
>
16head
>
17<
body
>
18<
div>
div>
19body
>
20html
>
移動端專案開發心得
通過這次專案開發，使我對布局有了更深層次的理解，對float和position的運用也更得心應手。體會到float和position對頁面的負面影響。其中，position absoulte fiexd會讓元素脫離文件流，其後面的元素 暫且稱為候補元素吧 會佔據原來的位置，需要對候補元素的margi...
移動端開發
一。響應式設計好處 1.一套專案 2.一套開發環境 3.乙個url 4.內容所見即所得 5.不會因為終端公升級而導致不可用 做法 布局百分比寬度 容器浮動 二。viewport引數的最佳組合 三。mediaquery書寫思路 先寫高解析度樣式。理由 1.設計師設計原型往往首先基於寬屏，甚至不會給出適...
移動端開發
移動前端開發正逐漸步入前端技術的主流，事實上跟在一般的pc上，並不需要你掌握額外的技術，然而你在pc web上那一套在多數情況下並不適用於手機web，你必須知道這其中的注意點。but，移動端布局最爽的就是再也不用考慮各種對ie的相容了 一 首先來說一下移動端和pc端頁面布局的不同點 二 做移動端頁面...