移动Web开发与适配笔记
项目要是适配手机端，想透彻的把相关内容弄清楚，现在总结一下。
一、移动端开发有如下特点：
1、跑在手机端的web 页面就是h5页面
2、具有跨平台性（web 安卓 iOS都适应）
3、基于webview；一个组件可以理解为一个浏览器（给一个URL即可打开，并显示）
4、基于webkit
5、更高的适配性和性能要求
二、常见的移动web适配方法：
（1）PC端
- 960px/1000px居中；
- 盒子模型，定宽，定高；
- display:inline-block。
（2）移动web
- 定高，宽度百分比；
- flex；
- Media Query(俗称媒体查询，和flex组合被称为响应式布局)。
Media Query(媒体查询)：
@media 媒体类型 and (媒体特性){ /*css形式*/ }
媒体类型：screen（屏幕），print（打印）;
媒体特性：max-width,max-height,min-width,min-height;
案例
<style type="text/css">
.box{
width:100%;
}
.inner:nth-child(1){
background-color:yellow;
}
.inner:nth-child(2){
background-color:blue;
}
.inner:nth-child(3){
background-color:green;
}
.inner:nth-child(4){
background-color:pink;
}
@media screen and (max-width:320px){
.inner{
width:25%;
height:100px;
float:left;
}
}
@media screen and (min-width:321px){
.inner{
width:100%;
height:100px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
三 rem适配
1）rem原理
- rem是一种字体单位，值根据html根元素大小而定；
- 适配原理是将px替换成rem，动态修改html的font-size。
- 基本覆盖所有的手机系统
- rem原理代码分析
/*1rem=17px=html的fontsize（默认为16px）*/
<style type="text/css">
html{font-size:17px;}
.box{
width:10rem;
height:10rem;
background:red;
}
.text{
color:#fff;
font-size:1rem;
} </style>
</head> <body>
<div class="box">
<p class="text">hello rem</p>
</div>
</body>
可以结合media方法来实现 不同机型下字体的大小在上面css中加入
@media screen and (max-width:360px)and (min-width:321px){
html{font-size:20px;}
}
@media screen and (max-width:320px){
html{font-size:20px;}
}
但是手机机型太多，不如用js方法动态设置
<script type="text/javascript">
//动态获取视窗宽度
var htmlWidth=document.documentElement.clientWidth;
console.log(htmlWidth);
//获取视窗高度
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontsize=htmlWidth/10 + 'px';
</script>
如果页面宽度是320px， htmlDom.style.fontsize=htmlWidth/10 + 'px'=32px;
那么170px换算成rem就是 170/32
2）rem进阶
- rem基准值计算；（rem的基准值就是html的fontsize）1rem=16px=html的font-size
- rem数值计算与构建 170px换算成rem 就是170/16 rem
- rem与scss结合使用
- rem适配实战
sass文件：
@function px2rem($px){
$rem:37.5px;
@return ($px/$rem)+rem;
}
.hello{
width:px2rem(100px);
height:px2rem(100px);
&.b{
width:px2rem(50px);
height:px2rem(50px);
}
}
css文件：
.hello{
width:2.66667rem;height:2.66667rem;
}
.hello.b{width:1.3333rem;height:1.3333rem;}
rem适配页面步骤：
1.页面框架搭建（构建，sass）
2.页面样式步骤
3.rem计算代码编写
4.适配多种机型大小、resize完善。
步骤一：首先安装好node和webpack，安装成功的结果是输入node-v，npm-v和webpack-v能出现相应的版本号。
步骤二：命令行进入项目的目录，然后执行npm init，在项目中创建一个package.json文件；
步骤三：将课程中package.json文件里面dependciess这部分代码copy进去；
"dependencies": {
"css-loader": "^0.28.9",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"url-loader": "^0.6.2"
}
步骤四：运行命令npm install
步骤五：创建一个webpack.config.js文件，并进行配置。参考配置：https://github.com/CruxF/IMOOC/blob/master/HTML_CSS/WebMoblie/webpack.config.js
webpack和node简单安装使用：http://www.cnblogs.com/fengxiongZz/p/8075903.html
sass出入门：http://www.cnblogs.com/fengxiongZz/p/7789928.html
移动端h5--页面适配：https://github.com/sunmaobin/sunmaobin.github.io/issues/28
移动Web开发与适配笔记的更多相关文章
- 《PHP与MySQL WEB开发》读书笔记
<PHP与MySQL WEB开发>读书笔记 作者:[美]Luke Welling PHP输出的HereDoc语法: echo <<<theEnd line 1 line ...
- 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记
近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...
- 《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记（转）
学习地址为: http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5 1.建立应用程序 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- Web开发入门学习笔记
公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...
- 《PHP和MySQL Web开发》读书笔记（下篇）
又与大家见面了.继续<PHP和MySQL Web开发>的总结. Chapter8.设计Web数据库 ·回去看看数据卡那本书吧,这里就不累赘谈这个东西. Chapter9.创建Web数据库 ...
- Windows 7下Node.js Web开发环境搭建笔记
Node.js是什么? 我们看看百科里怎么说的?JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本 ...
- 学习 Laravel - Web 开发实战入门笔记(1)
本笔记根据 LearnKu 教程边学边记而成.该教程以搭建出一个类似微博的Web 应用为最终成果,在过程中学习 Laravel 的相关知识. 准备开发环境 原教程使用官方推荐的 Homestead 开 ...
- 《Flask Web开发》学习笔记
第一部分 Flask简介 前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备.为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制. 特别提醒:这本书的代 ...
随机推荐
- framwork maven的配置及使用
maven的配置及使用 一.什么是maven: 我们在开发项目的过程中,会使用一些开源框架.第三方的工具等等,这些都是以jar包的方式被项目所引用,并且有些jar包还会依赖其他的jar包,我们同样需要 ...
- 机器学习基石笔记：11 Linear Models for Classification、LC vs LinReg vs LogReg、OVA、OVO
原文地址:https://www.jianshu.com/p/6f86290e70f9 一.二元分类的线性模型 线性回归后的参数值常用于PLA/PA/Logistic Regression的参数初始化 ...
- luogu3312 [SDOI2014]数表 (莫比乌斯反演+树状数组)
link \(\sum_{i=1}^n\sum_{j=1}^m[s(\gcd(i,j))\le a]s(\gcd(i,j))\) \(=\sum_{p=1}^ns(p)[s(p)\le a]\sum_ ...
- PHPExcel 报 Allowed memory size of 8388608 byte
使用 phpExcel 报 Allowed memory size of 8388608 bytes exhausted 错误,原因是php页面消耗的最大内存默认是为 8M (在PHP的ini件里可以 ...
- java背包的数组实现，链表实现
数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...
- java学习内容整理
转自:http://www.cnblogs.com/caoleiCoding/p/6170555.html 首先,我个人比较推崇的学习方法是:先学java前段,也就是HTML,css,js,因为学习j ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制
在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...
- C#工具类之字符串扩展类
/// <summary> /// 字典串帮忙类 /// </summary> public static class StringHelper { /// <summa ...
- tomcat 普通用户报错方案
Tomcat Neither the JAVA_HOME nor the JRE_HOME environment variable is defined 一眼就能看出来是jdk的环境有问题,但是用了 ...
- Spring Boot如何初始化数据
Hibernate机制:classpath下的import.sql,l在ddl-auto是create和create-drop时自动执行,如果ddl-auto设置为update就不合适,所以此选项不适 ...