移动h5开发入门知识，css的单位汇总与用法

关键词：

说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。

1、em

做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的默认值），那么 1em = 16px。

不过，这样使用很复杂，很难很好的与px进行对应，因此，前端开发的前辈们总结了一个经验

body {
font-size: 62.5%;
}

那么，这样之后 1em = 10px 在布局等使用的时候好换算了很多。

2、百分比

百分比相信大家更不会陌生了，百分比一般宽泛的讲是相对于父元素，但是并不是十分准确。

viewport：可视窗口，也就是浏览器的window那么大。

例外情况

3、rem

rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}   
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}

这样整个网页都会比较统一！不会造成混乱！

4、vh 和 vw

IE10＋ 和现代浏览器都支持这两个单位。

vw和vh会随着viewport变化自动变化，再也不用js控制全屏了。

甚至有些人丧心病狂的字体大小都用vw和vh控制，来达到字体和viewport大小同步的效果。

5、vmin和vmax

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax，新版已经支持，所有现代浏览器已经支持，但是IE 全部  不支持vmax

这两个属性也会随着viewport变化

6、ch和ex

IE9+ 和现代浏览器都已经支持,这两个单位时根据 当前font-family  的相对单位。

如下图：

当font-family改变的时候这两个单位的值也会变化，不同字体表现的样式不一样。

第二部分移动H5开发入门知识：CSS3的新单位算法

A、css3的calc()。

上面我们已经提到了calc()，下面我们就具体说一说吧！

浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.haorooms {
  width: calc(expression);
}

这样padding和margin和百分比一起用，问题就可以解决了。

例如，我们margin是20px。那么我们就可以写成

.haorooms{
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！
}

也可以这么用：

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
     width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

B、line-height百分比

line-height百分比在面试中可能经常问到。例如你知道line-height:120%和line-height:1.2的区别吗？

现在就说一下行高带单位和不带单位的区别，例如下面的例子：

line-height:26px; 表示行高为26个像素
line-heigth:120%;表示行高为当前字体大小的120%
line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12，行高还是父元素的行高)

line-height:2.6;表示行高为当前字体大小的2.6倍

不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;他的行高为28px;子元素尺寸为12px，不需要再定义行高，他默认的行高为24px。（例如：子元素12px，他的行高是24,不会继承父元素的28）

希望以上的这些移动H5开发入门知识点，对各位的H5前端开发学习有一定的帮助. 同时25学堂奉上一个纯css3写的加载动画特效。

移动端h5网页开发必备知识(代码片段)

简介工欲善其事必先利其器，今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇总移动... 查看详情

移动端h5页面适配问题研究

参考技术A刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？viewport我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询... 查看详情

移动开发--像素知识

抽象单位：可以根据不同设备关系来变大变小。而物理像素是固定的，不会改变。 例如：iPhone51个css像素=4个物理像素 上图中1136和640的单位是dp window.devicePixelRatio是设备上物理像素和设备独立像素(dip或dp)(device-independe... 查看详情

三分钟学会h5聊天机器人开发（附源码和在线演示）

...的前端开发IDE（开发平台）。  项目搭建选择新建移动APP目录结构如下：其中css文件夹存放我们的css文件，js文件夹存放项目中需要使用的各种 查看详情

css-移动端响应式布局详解

背景移动端响应式布局开发主要方案有：基于rem开发基于媒体查询基于弹性盒基础概念在讨论响应式布局知识前，先了解下移动端常用基础概念。逻辑像素(CSSpixels)浏览器使用的抽象单位，主要用来在网页上绘制内容；通常在我... 查看详情

h5学习路线图（留存）

转载于：http://blog.csdn.net/soindy/article/details/52387451H5学习路线图前端入门:页面布局与重构,HTMLCSS 移动前端开发:响应式布局, HTML5 CSS Web交互开发: JavaScript, jQuery Ajax 前端高级开发:原生开发,移动端开发HT 查看详情

ewm常规开发知识汇总(代码片段)

...gement（简写EWM），此系统为客户处理各种商品移动和管理仓库库存，提供灵活的自动化支持。系统能够对客户所有仓库物流流程进行有计划地高效处理，而仓库中的主要流程是收货和退货，收货和发货。一... 查看详情

移动端开发必会出现的问题和解决方案(代码片段)

...，之后我也会实践后加以补充，感谢！（经常更新该文）移动端H5相关问题汇总：1px问题响应式布局iOS滑动不流畅iOS上拉边界下拉出现白色空白页面件放大或缩小不确定性行为click点击穿透与延迟软键盘弹出将页面顶起来、收起... 查看详情

h5开发移动应用app(店铺系列一)

...活动，这正不是我擅长的吗？说干就干，直接后端+web端+移动端来一套，于是紧急赶工，起早摸黑，产出约3万行总量代码，此系统与工作无关，纯属个人业余开发，所以我敢拿来任意剖析，如果有时间我就出个连载，做一些典型... 查看详情

h5移动开发底部导航-博客园老牛大讲堂

一、H5分类　　网页开发，移动开发，移动混合开发，二、所用知识点：　　APICloud：APICloud是为了开发APP的，所以如果用H5开发的移动端，需要发送短信，获取照相机等就要用APICloud的了。　　aui框架：aui框架就是专门开发移动... 查看详情

移动开发知识点收集

移动端H5页面遇到的问题总结支付宝Android版使用的开源组件 查看详情

linux后台开发相关面试知识点汇总脑图版

...薪资待遇。JD1：Linux服务器开发工程师20-40K职位描述负责移动游戏社区APP后台服务架构设计开发；负责移动游戏社区平台用户数据分析及相关推荐业务开发；负责移动游戏实时语音业务系统设计和开发工作。职责：负责移动游戏... 查看详情

css-移动端reset汇总与注释

1.解决移动端触摸a元素，会有蓝色阴影正常状态：    点击时状态： a{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}-webkit-tap-highlight-color:rgba(0,0,0,0);可以将该阴影透明化 2.对于多个图片之间会有小间隙.imgs-box{ 查看详情

android中实现native与h5的通信方案汇总(代码片段)

...版不舒服，可移步【Android中实现Native与H5的通信方案汇总】一、利用JsBridge实现Native与H5的双向通信Android中的JSBridge是H5与Native通信的桥梁，其作用是实现H5与Native间的双向通信。在Android中展现H5也就用到了Webview，之前... 查看详情

汇总css布局模型和常见代码缩写与长度单位(代码片段)

知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型(Float)3.层模型（Layer）。一、流动模型：默认的网页布局模式。也就是说网页在默认状态下的HTML网页元... 查看详情

spring知识汇总

Spring简介Spring框架由RodJohnson开发，2004年发布了Spring框架的第一版。Spring是一个从实际开发中抽取出来的框架，因此它完成了大量开发中的通用步骤，留给开发者的仅仅是与特定应用相关的部分，从而大大提高了企业应用的开发... 查看详情

移动端开发基础知识

1.物理像素像素即一个小方块，它具有特定的位置和颜色，像素可以作为图片或电子屏幕的最小组成单位，这是一个相对长度单位，因为固定长度的屏幕可以有1000像素，也可以有5000像素2.分辨率屏幕分辨率指一个屏幕具体由多少... 查看详情

前端里移动端到底比pc端多哪些知识，为啥面试时好多公司都问h5

...b前端开发，就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别：（1）PC考虑的是浏览器兼容性，移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器用的都是webki... 查看详情