什么是移动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;200px;height:30px;"> <input type="button" value="" style="-webkit-appearance: push-button;200px;"> <input type="text" name="" style="-webkit-appearance:searchfield;">
显示效果如下
clear属性
clear 属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |