html5實現移動端效果時,怎麼做好用戶體驗

最重要的點:需要控制不同尺寸的設備顯示的效果
其次考慮移動端的兼容性以及顯示的內容從簡為主
不同的尺寸主要是在不同尺寸下有不同的樣式: 不同的尺寸一般移動端這樣控制
@media screen and (max-width: 319px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 320px) and (max-width: 359px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}

@media screen and (min-width: 410px) and (max-width: 479px){
.show-menu{
width: 44px;
height: 44px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 480px) and (max-width: 639px){
.show-menu{
width: 50px;
height: 44px;
left: 2%;
top: 50%;
}}
@media screen and (min-width: 640px){
.show-menu{
width: 55px;
height: 44px;
left: 2%;
top: 50%;
}}

② 如何用html5 寫移動web

HTML5最顯著的優勢在於跨平台性,用HMTL5開發的站點與應用可以兼容PC端與移動端、Windows與Linux、安卓與IOS。它可以輕易地移植到各種不同的開放平台、應用平台上。

③ 如何在移動設備上調試html5開發的網頁

一、iOS + Safari
1、打開手機web檢查器。
通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖(點擊查看大圖),並且你會看到該選項下面對電腦操作的相應描述,照做就好。

2.鏈接電腦(Mac)
2.1 先在手機Safari中打開你想調試的網頁,並用數據線連接到電腦(我這里是Mac)
2.2 再在電腦上打開Safari點擊【Develop】菜單,就會看到如下圖所示(點擊查看大圖):

3.3 點擊2.2中的網站名就會在電腦上打開Safari的控制台,如下圖(點擊查看大圖):

3.調試網頁
如上3.3圖所示,此時你可以查看手機網頁的DOM結構,並且和電腦端網頁調試無異,當滑鼠滑過這些DOM節點的時候手機上的相應布局也會高亮起來,如下圖(點擊查看大圖):

二、Android + Chrome
1.設置手機

1.1【設置】>【關於手機】>【版本號(Build number)】,對版本號這一項連點7下(這是官方文檔里的說法)就會提示「你已成為開發者」。

1.2 再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。

2.設置電腦(Mac)
這塊比較麻煩,因為要裝一下Android的SDK。
2.1 下載Android SDK,並解壓,我把整個adt目錄放在了 /Users/David/adt/ 這里。
2.2 設置環境變數 。打開終端在David路徑下(形如 DaviddeMacBook-Pro:~ David$)輸入 open .bash_profile,如果文件存在則會打開,如果不存在則再輸入touch .bash_profile 創建並打開這個文件。在文件里輸入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,關閉保存。最後在終端里輸入 source .bash_profile 來更新環境變數使其生效。終端里輸入 adb 出現命令幫助信息就是成功了。
2.3 在終端里輸入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。

3.鏈接電腦
3.1 在手機上的Chrome里打開想要調試的網頁,用數據線連接手機和電腦(我的是Mac。唉~我只是強調平台的不同,不要誤會)。
3.2 打開電腦上的Chrome,在地址欄里輸入 about:inspect 選中 【Discover USB Devices】前面的復選框。出現下圖畫面(點擊查看大圖):

4.調試網頁
4.1 你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】,或者在瀏覽器中輸入 localhost:9222 打開手機正在瀏覽的網頁列表,如下圖:

4.2 點擊上圖中的網站縮略圖,就會跳轉到Google的一個代理鏈接(鏈接可能被牆……,掛代理)就會打開如下圖所示的控制台(點擊查看大圖):

4.3 這就和電腦上網頁調試沒什麼差別了,滑鼠經過DOM節點,手機上的布局同樣也會高亮起來:

好的,完結。

④ 如何用html5做移動頁面和移動場景

初頁,易企秀等很多網站提供"即見即所得"編輯方式

⑤ html5,鍵盤控制移動,和老師的代碼一樣,我怎麼運行不出效果。報錯的英文是找不到style這個屬性

寫錯了 是div1

⑥ css里如何移動按鈕的位置

用margin-top的屬性設置按鈕的位置。

假設按鈕的class為btn,向上移動10像素。

css:

.btn{

margin-top:-10px;

}

margin:設置一個元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。

塊級元素的垂直相鄰外邊距會合並,而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地,浮動元素的外邊距也不會合並。允許指定負的外邊距值,不過使用時要小心。

允許使用負值。

(6)html5控制移動擴展閱讀:

CSS 外邊距:

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的「空白」。

設置外邊距的最簡單的方法就是使用 margin 屬性,這個屬性接受任何長度單位、百分數值甚至負值。

margin 屬性接受任何長度單位,可以是像素、英寸、毫米或 em。

margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。

margin 的默認值是 0,所以如果沒有為 margin 聲明一個值,就不會出現外邊距。但是,在實際中,瀏覽器對許多元素已經提供了預定的樣式,外邊距也不例外。

因此,如果沒有為 p 元素聲明外邊距,瀏覽器可能會自己應用一個外邊距。當然,只要你特別作了聲明,就會覆蓋默認樣式。

可以使用下列任何一個屬性來只設置相應上的外邊距,而不會直接影響所有其他外邊距:

margin-top、margin-right、margin-bottom、margin-left。

⑦ HTML 裡面的圖片怎麼移動位置

需要准備的材料分別有:電腦、chrome瀏覽器、html編輯器。

1、首先,打開html編輯器,新建一個html文件,例如:index.html,填充問題基礎代碼。

⑧ 在html5中移動一個元素怎麼讓另一個元素不會移動

只有用定位的屬性
網頁里想要隨意調整一個元素的位置並且保證對其他的元素沒有影響,就只有定位的屬性了
當然,也有這種可能--兩個元素分別給,float:left;float:right;的屬性,同時這兩個元素都很小,一個在最左邊,一個在最右邊,那麼你稍微調整位置,用margin屬性,也是不會影響到另外一個元素的

⑨ html5怎麼實現頁面左右滑動(下圖區域),可以左右滑動但不需要換頁

1、創建兩個抄html文件,一個test一個test2。