html5移動端製作知識點總結

2022-05-30 04:15:12 字數 2049 閱讀 7584

固屏類流體設計

1.京東**:

2.**網:全屏+固屏,導航一般用全屏)

四、標籤,放在之間

name="viewport" //視窗設定

width=device-width //頁面大小螢幕等寬

initial-scale=1.0 //初始縮放比例,1.0 表示原始比例大小

minimum-scale=1.0 //允許縮放的最小比例

maximum-scale=1.0 //允許縮放的最大比例

user-scalable=no //使用者是否可以縮放,這裡 no 表示不可以

五、rem

網頁預設字型大小為16px,如果想設定為10px,用百分比則為10/16*100%=62.5%,所以在html中設定字型大小為62.5%,即10px,那麼下面的其它元素都用rem作為單位,那麼10px就是1rem,14px就是14*1/10=1.4rem。

同理,如果裡面乙個p的字型大小想設定為24px,那麼2.4rem。

相容性:ie9+,以及現代主流瀏覽器。

所有的單位畫素都換成rem,區塊和縮放用百分比。

七、**查詢

/***查詢,部分參考bootstrap框架*/

/*當頁面大於1200px時,大螢幕,主要是pc端*/

@media(min-width:1200px)

/*當頁面大於992px,小於1199px之間時,中等螢幕,解析度低的pc*/

@media(min-width:992px)and(max-width:1199px)

/*當頁面大於768px,小於991px之間時,小螢幕,主要是pad*/

@media(min-width:768px)and(max-width:991px)

/*當頁面大於480px,小於767px之間時,超小螢幕,主要是手機*/

@media(min-width:480px)and(max-width:767px)

/*當頁面小於480px時,微小螢幕,更低解析度手機。*/

@media(max-width:479px)

八、box-sizing屬性(當給乙個區塊設定padding值時,區塊的寬高可以保持不變)

div

九、清理浮動

乙個div清理浮動之後,在設定上下外邊距就沒有效果了,這是解決方法是在上面浮動元素的末尾加上乙個空div,再利用偽元素進行清除浮動。

.clearfix::after

十、超出文字不換行,用省略號表示

但這是webkit的私有屬性,解決的兩乙個方法:在文字外面包裹乙個div,設定它的css

div十

一、如果5個鏈結,按照順序排列: abcde,結果加上之後,順序就變成了edcba。

當a遇到float,則命令它向右跑去。當b遇到fooat,同上,但此時最右邊位置已經被a佔了,所以b只能在a 左邊。。。。cde依次。因此就倒序了。

解決方法之,套個外圍標籤:複製內容到剪貼簿**:abcde

十二、讓導航欄固定在視窗頂部,在最上層,始終可見

header

還要在下面空出45畫素距離,.bottom

十三、超出兩行則用省略號表示(一行、兩行、三行……同理)(webkit的私有屬性)

十四、若內容太滿,在小視窗中為隱藏,用**查詢,設定display:none;

十五、設定大小盡量不用絕對畫素,改為寬度百分比,高度自適應。或者只用padding控制大小。

十六、css透明度設定(相容所有瀏覽器)

transparent_class 

這種方式會讓輸入框的背景色變成50%透明度的紅色,但輸入框的的文字不受任何影響。

十八、粗體文字

html5 規範宣告:應該使用標籤" href="">-  來表示標題,使用 標籤" href=""> 標籤來表示強調的文字,應該使用  標籤來表示重要文字,應該使用 標籤來表示標註的/突出顯示的文字。在沒有其他合適標籤更合適時,才應該把標籤作為最後的選項。

十九、box-sizing:border-box;

把邊框和內邊距包括在內,當設定padding的時候不用重新計算。

html5移動端知識點總結

1.1使用 查詢,不同解析度設定不同的html的font size min width 320px min width 360px min width 400px min width 640px 優點 使用css即可實現,不需要js 缺點 只能匹配部分機型 1.2使用js 控制html的font s...

HTML5知識點總結(三)

字型及文字屬性 邊距和填充 邊框屬性 列表屬性 背景屬性 背景的漸變 陰影屬性 字型屬性 type text css font 設定字型是所有樣式 font family 設定字型型別 font size 設定字型大小 font weight 設定字型粗細 color 設定字型顏色 font fam...

html5移動開發知識點大全

橫屏時使用的樣式 手勢事件 touchstart 當手指接觸螢幕時觸發 touchmove 當已經接觸螢幕的手指開始移動後觸發 touchend 當手指離開螢幕時觸發 touchcancel 觸控事件 gesturestart 當兩個手指接觸螢幕時觸發 gesturechange 當兩個手指接觸螢幕...