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爲負數來固定右側內容,同時設置內部的div的margin-left爲整數來調整顯示範圍。通過margin-left爲負數來固定右側內容,同時設置內部的div的margin-left爲整數來調整顯示範圍。通過margin-left爲負數來固定右側內容,同時設置內部的div的margin-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="第一行 第二行" />