移动WEB开发基础入门

什么是移动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 属性的值。