wap(html)知識點整理(持續更新)

wap(html)知識點整理(持續更新)

1、px、em、rem的關係

px爲固定大小
em/rem爲相對大小,其中em相對其父節點,rem相對html根節點

2、google瀏覽器無法設置1rem=10px問題

在把px轉換成rem的過程中,會在設置html的css的font-size爲62.5%已使得在進行px到rem的轉換中1rem=10px。但是這種方式在chrome中不起作用,這樣設置之後1rem=12px,這是因爲chrome認爲字體的最小爲12px,你設置1rem等於10px,chrome強制轉換成1rem=12px。
把html的font-size設置成625%,那麼1rem=100px就可以了。

3、右邊固定寬度,左邊自適應問題;左邊固定,右邊自適應問題

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <div>左邊固定,右邊自適應(一定記住要clear float)</div>
    <div>
        <div style="width: 200px; height: 200px;float: left;background-color: gray;">
            200X200
        </div>
        <div style="height: 200px; margin-left: 200px;background-color: purple;color: white;">  自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!自適應寬度!!!
        </div>
        <div style="clear: both;"></div>
    </div>
    <hr/>
    <div>右邊固定,左邊自適應(一定記住要clear float)</div>
    <div>
        <div style="width: 100%;height: 200px; margin-left: -200px; float: left;background-color:purple;">
            <div style="margin-left: 200px;color: white;">通過margin-left爲負數來固定右側內容,同時設置內部的divmargin-left爲整數來調整顯示範圍。通過margin-left爲負數來固定右側內容,同時設置內部的divmargin-left爲整數來調整顯示範圍。通過margin-left爲負數來固定右側內容,同時設置內部的divmargin-left爲整數來調整顯示範圍。</div>
        </div>
        <div style="width: 200px; height: 200px; float:left;background-color:gray;">
            200X200
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

4、讓body的height高爲100%

之前直接設置body的height爲100%,發現沒有用。後面發現需要把html和body同時設置heigth爲100%。

5、touchend無法觸發

在touchstart觸發時調用event.preventDefault();方法就可以了。

6、禁止雙擊放大網頁

加入meta,進行限制

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

7、禁止瀏覽器滾動條

overflow-x: hidden;
overflow-y: hidden;

8、textarea固定大小

resize: none;

9、button上的文字換行

兩行文字中加入 谷歌測試有效

<input type="button" value="第一行&#13;&#10;第二行" />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章