怎麼製作html5手機頁面

時間 2021-10-14 20:19:36

1樓:百推寶

隨著css3的興起,有一種叫rem的單位漸漸的出現在我們的視野中。它是一個相對單位,能實現響應式的那種。它是相對於html根元素來設定當前文字大小,或者寬高的。

因為它是一個不固定值,不像px。聽說在px這個單位在pc和移動的解析不同,所以才使用rem的。

一、header資訊的設定(自適應)

1、宣告資訊

2、編碼設定

3、移動裝置特別設定(重要宣告!)

viewport說明:該設定可使我們開發出的頁面/產品 大小可適應各種高階移動裝置

width=device-width 為裝置的寬度.

user-scalable=no/yes 此功能為使用者調整縮放。預設為yes。一般設定為no

ps:初次嘗試製作移動端頁面。親們,由於我沒有加上面的viewport宣告,結果導致頁面狼狽不堪。

二、手機觸控手動滑動效果

1、觸控式螢幕效果滾動元件(js必須包含的部分)

2、所要在手機端做滑動效果的部位(html**部分)

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbbbbbbbbbbb

cccccccccccccccccccccccccccc

ddddddddddddddddddddddddd

3、js**塊(改**會在動在要加滑動效果的html**塊中自動生成一塊**)

4、載入slider.css樣式

附:另外一種簡單的寫法(適用於幻燈)

html**部分

2、js**部分

附:小知識

一、字型效果

color:#fff 定義字型的顏色

text-shadow:0 0 2px #146f61;(css3.0特效)

css3.0的文字陰影 text-shadow

語法:text-shadow: h-shadow v-shadow blur color;

也就是text-shadow:【x軸(x offset) y軸(y offst) 模糊半徑(blur) 顏色(color)】

例如:text-shadow: 5px 5px 5px #ff0000;

2樓:匿名使用者

1、學html5,然後自己程式設計,如果有html的基礎,其實不會太難;

2、去html5頁面製作平臺,如vxplo、wix、maka.im都可以做html5的手機頁面,不過wix現在沒有中文**;vxplo功能很齊全,但同時操作很複雜,一般人不會使用;maka.im通過模板組合、新增**的方式製作,適合剛入門的童鞋。

樓主自己看哪個適合自己吧~

3樓:zhengjun白羊

html5和以前html,jsp寫法一樣的,基本上區別不大,如果要寫手機頁面的話,可以用dw

然後在裡面用手機版塊看效果

4樓:匿名使用者

分享個群,每天有免費手機**的課程分享,你可以去學習, 306456935

html如何適應手機,html5頁面怎麼適應個手機的尺寸

有幾種,利用meta標籤 百分比法 使用css3單位rem 查詢。利用meta標籤 解釋 viewport指使用者網頁的可視區域,content中的 width 指的是虛擬視窗寬度,上面 意為虛擬視窗 頁面寬度初始比例為1,最小比例為1,最大比例為1,使用者不可擴充套件,頁面不可縮放。以上標籤只支援...

html手機端支援問題,html頁面適配手機端在chrome瀏覽器手機模擬器上除錯成功,但手機上卻不行,css媒體查詢沒有效果

前端晨話 你可以試下這種方法 bottombtn on input propertychange myfile function bottombtn是父元素,myfile是子元素。你可以先試一下。html頁面適配手機端在chrome瀏覽器手機模擬器上除錯成功,但手機上卻不行,css 查詢沒有效果 可...

做好的html怎麼讓它轉成html5自適應螢幕大鋅

ps一點學 html5不是轉化的,只要你編寫的html 符合html5規則就行,要不然不會自適應螢幕大小的,建議你看一下html5標籤文件。建議 如果是小白的話,建議你看一下網上的教程或者案例,自己對比學習再寫。 maplestory太子 特點 1 簡易性 超級文字標記語言版本升級採用超集方式,從而...