项目要是适配手机端，想透彻的把相关内容弄清楚，现在总结一下。

一、移动端开发有如下特点：

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开发与适配笔记的更多相关文章

  1. 《PHP与MySQL WEB开发》读书笔记

    <PHP与MySQL WEB开发>读书笔记 作者:[美]Luke Welling PHP输出的HereDoc语法: echo <<<theEnd line 1 line ...

  2. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  3. 《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记（转）

    学习地址为: http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5   1.建立应用程序 ...

  4. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  5. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  6. 《PHP和MySQL Web开发》读书笔记（下篇）

    又与大家见面了.继续<PHP和MySQL Web开发>的总结. Chapter8.设计Web数据库 ·回去看看数据卡那本书吧,这里就不累赘谈这个东西. Chapter9.创建Web数据库 ...

  7. Windows 7下Node.js Web开发环境搭建笔记

    Node.js是什么? 我们看看百科里怎么说的?JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本 ...

  8. 学习 Laravel - Web 开发实战入门笔记(1)

    本笔记根据 LearnKu 教程边学边记而成.该教程以搭建出一个类似微博的Web 应用为最终成果,在过程中学习 Laravel 的相关知识. 准备开发环境 原教程使用官方推荐的 Homestead 开 ...

  9. 《Flask Web开发》学习笔记

    第一部分 Flask简介 前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备.为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制. 特别提醒:这本书的代 ...

随机推荐

  1. SQLServer数据库,表内存,实例名分析SQL语句

    --数据库内存分析 USE master go DECLARE @insSize TABLE(dbName sysname,checkTime VARCHAR(19),dbSize VARCHAR(5 ...

  2. poj2409(polya 定理模板)

    题目链接:http://poj.org/problem?id=2409 题意:输入 m, n 表示有 m 种颜色,要构造一个长度为 n 的手环,旋转和对称的只算一种,问能组成多少个不同的手环． 思路: ...

  3. Loadrunner 性能测试笔记

    性能测试脚本 // 关联token 放在请求返回前 web_reg_save_param("tokenId", "LB=,\"tokenId\":\& ...

  4. 洛谷P3604 美好的每一天（莫队）

    传送门 由乃的题还是一如既往的可怕…… 先放上原题解 标解: 一个区间可以重排成为回文串,即区间中最多有一个字母出现奇数次,其他的都出现偶数次 发现这个和  类似 这样如果一个区间的  和为  或者  ...

  5. Tarjan缩点+LCA【洛谷P2416】 泡芙

    P2416 泡芙 题目描述 火星猫经过一番努力终于到达了冥王星.他发现冥王星有 N 座城市,M 条无向边.火星猫准备出发去找冥王兔,他听说有若干泡芙掉落在一些边上,他准备采集一些去送给冥王兔.但是火星 ...

  6. luogu2948 滑雪课

    题解里面全是dp的大神本蒟蒻瑟瑟发抖奉上一篇记忆化搜索... 其实嘛,记忆化搜索还是很安全透彻清真人品的,一般递推不好实现dp可以用记忆化搜索 然后本题先预处理一个mint[i]代表当前能力值为i,参 ...

  7. 基础线程机制--Executor线程池框架

    基础线程机制 Executor线程池框架 1.引入Executor的原因 (1)new Thread()的缺点 ​  每次new Thread()耗费性能 ​  调用new Thread()创建的线程 ...

  8. Android自动化----adb shell，appium，uiautomator2

    1.区别 1,adb shell脚本的方式 不但可以在有电脑的情况下使用,通过数据线连接电脑然后adb shell命令,而且还可以打包成app,在手机的终端使用adb shell命令. 2,appiu ...

  9. PowerShell命令部署WSP

    转载:http://www.cnblogs.com/ChunLiangZhang/archive/2012/07/18/2597335.html(作者:ChunLiang) 现在可以用SharePoi ...

  10. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制

    在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...