移动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
