什么是移动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:;

padding:;

/*清楚移动端默认的 点击高亮效果*/

-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:;

}

a{

color:;

}

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:;

line-height:;

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 属性的值。 


												


											
移动WEB开发基础入门的更多相关文章
	

    
								
  1. Mr.聂   带你成为web开发大牛——入门篇（上）
		
    作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...
    
		
    2. 
						
  2. [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现
		
    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
    
		
    3. 
						
  3. 【ZZ】Web开发的入门指导 | 菜鸟教程
		
    Web开发的入门指导 http://www.runoob.com/w3cnote/a-beginners-guide-to-web-development.html
    
		
    4. 
						
  4. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接
		
      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...
    
		
    5. 
						
  5. 提高生产力：Web开发基础平台WebCommon的设计和实现
		
    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
    
		
    6. 
						
  6. 第五模块：WEB开发基础 第1章·HTML&CSS基础
		
    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
    
		
    7. 
						
  7. PHP 系列：PHP Web 开发基础
		
    PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集 ...
    
		
    8. 
						
  8. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
		
    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
    
		
    9. 
						
  9. Web开发基础知识
		
    综述 最近开始Java Web方面的工作,千里之行始于足下,我们在开发过程中要善于总结自己遇到的问题.善于管理一些优秀的代码片段.本文的主要内容是Web开发的基础知识,对于大牛来说可以忽略,对于初入W ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 转:extern "C"的用法解析
			
    1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C语言的全局变量和函数所采用的编译和连接方式与C语言完全相同.作为一种欲与C兼容的语言, C++保留了一部分过程式 ...
    
			
    2. 
						
  2. MessagePack 学习笔记
			
    封装和解析类似json的  key-value 示例 {"ID" = 333,"name"="zds","3333"=& ...
    
			
    3. 
						
  3. MySQL 索引优化 Using where, Using filesort
			
    用Explain分析SQL语句的时候,经常发现有的语句在Extra列会出现Using filesort,根据MySQL官方文档对他的描述: 引用 MySQL must do an extra pass ...
    
			
    4. 
						
  4. openssl req 证书请求及自签名证书
			
    介绍 openssl req 用于生成证书请求,以让第三方权威机构CA来签发,生成我们需要的证书.req 命令也可以调用x509命令,以进行格式转换及显示证书文件中的text,modulus等信息.如 ...
    
			
    5. 
						
  5. RHEL/CentOS 7.x/6.x/5.x开启EPEL仓库
			
    说明 原文链接 翻译:@adolphlwq 项目地址 这篇指南文章教你如何在 RHEL/CentOS 7.x/6.x/5.x 系统中开启EPEL仓库支持,以便你可以使用 yum 命令 安装额外的标准开 ...
    
			
    6. 
						
  6. 安装gitlab遇到的问题
			
    参考文章: http://www.pickysysadmin.ca/2013/03/25/how-to-install-gitlab-5-0-on-centos-6/ 一直跟着这篇文章做,还挺顺利的, ...
    
			
    7. 
						
  7. php非阻塞服务器
			
    <?php class PHPSocketServer { const ERROR = 0; const LOG = 1; const DEBUG = 2; private $aConfig = ...
    
			
    8. 
						
  8. WinRAR破解
			
    新建记事本文件(txt文件),然后将文件另存为以 rarreg.key 为文件名的文件(当然由于设置的不同,可能出现你保存后的文件为 rarreg.key.txt 没关系,将其重命名,删掉.txt 会 ...
    
			
    9. 
						
  9. 自定义View之圆形水波扩散动效
			
    这个效果做出来以后,真的美极了!放在你的应用中,无疑增添了光彩! 效果图    其实,第一种效果,才是产品的需求要的效果.第三种效果,是不是很熟悉?支付宝的咻一咻!哈哈,无意中,我就写出来了. 实现步 ...
    
			
    10. 
						
  10. 一段js代码
			
    原文地址 [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math ...
    
			
    11.