什么是移動WEB開發，我個人理解就是，將網頁更好的顯示在移動端的一些設置，簡單來說就兩點如下：
1、流式布局，即百分比自適應布局
將body下的div容器的樣式設置如下：
div{ width:100%; }
2、viewport視口
在head標簽中，添加如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
設置寬度width，設置成和設備一樣的寬度device-width設備寬度
設置默認的縮放比initial-scale 1.0
設置是否運行用戶自行縮放user-scalable 0 1 no yes
還有其他的，如：
maximum-scale：最大縮放比，大於0的數字
minimum-scale：最小縮放比，大於0的數字
可以將width不寫么？
可以，僅僅固定字體的大小，viewport的width即使設置了固定值 ,但是設置了initial-scale這個屬性后，會自動把width變成device-width(即使width不設置，也會默認設置width=device-width).
針對移動WEB端的基礎樣式/*重置樣式*/
*,::before,::after{ /*選擇所有的標簽*/ margin:0; padding:0; /*清楚移動端默認的 點擊高亮效果*/ -webkit-tap-highlight-color:transparent; /*設置所有的都是以邊框開始計算寬度 百分比*/ -webkit-box-sizing:border-box;/*兼容*/ box-sizing:border-box; } body{ font-size:14px; font-family:"Microsoft YaHei",sans-serif;/*設備默認字體*/ color:333; } a{ color:333; } a:hover{ text-decoration:none;/*不顯示下划線*/ }
ul,ol{
list-style:none;
} input{ border:none; outline:none; /*清除移動端默認的表單樣式*/ -webkit-appearance:none; } /*公共樣式*/ .f_left{ float:left; } .f_right{ float:right; } .clearfix::before,.clearfix::after{ content:""; height:0; line-height:0; display:block; visibility:hidden; clear:both; }
text-decoration解釋
<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} a {text-decoration: none} </style> </head> <body> <h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <p><a href="http://www.w3school.com.cn/index.html">這是一個鏈接</a></p> </body> </html>
效果如下所示：
將a標簽的樣式去掉后顯示如下：
box-sizing:border-box;的作用
如果不寫這個樣式，標簽的寬度是以標簽的內容開始計算的，假如標簽的邊框很寬，會出現左右滾動條
-webkit-tap-highlight-color:transparent;的作用
如果不寫，比如一個button被點擊后，就會出現一個高亮的點擊按鈕后的區域，將這個區域設置為透明
-webkit-appearance的解釋
<input type="range" name="" style="-webkit-appearance: slider-horizontal"> <input type="button" value="" style="-webkit-appearance: button;width:200px;height:30px;"> <input type="button" value="" style="-webkit-appearance: push-button;width:200px;"> <input type="text" name="" style="-webkit-appearance:searchfield;">
顯示效果如下
clear屬性
clear 屬性規定元素的哪一側不允許其他浮動元素。
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素。 |
| right | 在右側不允許浮動元素。 |
| both | 在左右兩側均不允許浮動元素。 |
| none | 默認值。允許浮動元素出現在兩側。 |
| inherit | 規定應該從父元素繼承 clear 屬性的值。 |