H5学习
1、html{font-size:62.5%;}//不用font-size:10px的原因:(因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。 用rem定义尺寸的另一个好处是更能适应缩放/浏览器设置字体尺寸等情况(因为rem相对于字体大小,会同步改变)。
至于选择62.5%而非10px的原因,主要是兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理,还是让px回归“像素”的本意,但62.5%代表默认字体尺寸的62.5%这个含义基本不会有混乱---引自https://segmentfault.com/q/1010000002411895
)
2、宽度用百分比
3、高度可以用rem
4、最好不用float 用display:-webkit-box;
.box{
/* display */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
/* box-orient */
/**
* vertical column
* horizontal row
*/
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-o-box-orient: vertical;
box-orient: vertical;
/* box-flex */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-o-box-flex: 1;
box-flex: 1;
/* box-pack */
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-o-box-pack: justify;
box-pack: justify;
/* box-align */
-webkit-box-align: justify;
-moz-box-align: justify;
-ms-flex-align: justify;
-o-box-align: justify;
box-align: justify;
}
5、同PC端一样,H5中的js最好也写在window.onload(function(){})或$(function(){})中
H5学习的更多相关文章
- H5学习的第三周
上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我 ...
- H5学习第二周
怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...
- H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
- 2017.3.12 H5学习的第一周
本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...
- H5学习第一周
已经接触H5一个周了,经过学习,总算对H5有了一些了解和认知,下面就总结一下我对H5的认知和感悟. 首先接触的是H5的常用标签[meta],它有其以下常用属性 1.charset属性.单独使用,设置文 ...
- H5学习之--前端和PHP后端的简单交互
最近在学习前端的东西,H5+CSS3+JS,又分别学习了原生JS和jQuery库,还有Bootstrap框架,因为我是做ios开发的,所以先熟悉WebApp相关的开发知识,其他的学习资料,网上有很多的 ...
- H5学习系列之Geolocation API
获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...
- H5学习系列之Audio和Video
1.视频文件:音频轨道.视频轨道和一些元数据(视频封面.标题.子标题.字幕等相关信息). 2.目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件).H5的媒体收到跨域资源共享 ...
- H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...
随机推荐
- SSIS Design1: 源数据提取
数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...
- 解读sencha touch移动框架的核心架构(一)
sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...
- 用bootstrap实现多张图片手动轮回
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAJoCAIAAABHhBX4AAAgAElEQVR4nOzdZXdcV7rg8fmIM2vm3r
- Android探索之HttpURLConnection网络请求
前言: 最近一直想着学习一下比较好的开源网络框架okhttp,想着学习之前还是先总结一下Android原生提供的网络请求.之前一直在使用HttpClient,但是android 6.0(api 23) ...
- Rust初步(二):使用Visual Studio Code编写Rust程序(猜猜看游戏)
我是照着下面这篇帮助文档,完成了第一个完整的Rust程序: 猜猜看 游戏 http://kaisery.gitbooks.io/rust-book-chinese/content/content/3. ...
- OracleDBA之数据库管理
以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer2003的操作系统,可能有些命令和Orac ...
- 2014年百度之星程序设计大赛 - 初赛(第二轮)Chess
题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...
- EntityFramework 7 smallint short 奇怪问题(已解决)
在使用 EF7 进行条件查询的时候,遇到一个很奇怪的问题,不知道 EF 其他版本有没有这种情况,怎么说呢?一句话描述不清楚,具体请看下面内容. 问题场景 BloggingContext 配置代码: u ...
- AOP的实现机制--转
原文地址:http://www.iteye.com/topic/1116696 1 AOP各种的实现 AOP就是面向切面编程,我们可以从几个层面来实现AOP. 在编译器修改源代码,在运行期字节码加载前 ...
- iOS chart 图表完美解决方案 基于swift
如果打算在app中使用图标功能,这个框架基本能够满足90%的需求 下边是作者的框架的下载地址 ,基于swift2.0 https://github.com/danielgindi/ios-charts ...