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

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

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. meta常用命令

    sessions -i 1用于查看你控制的电脑

  2. linux 定制

    转载至http://luyafei.blog.51cto.com/1092421/1131532 测试环境: VMware Workstation 8.0 CentOS 6.7 x86_64 1.安装 ...

  3. Django之博客系统:用户登陆

    使用django有一个好处就是有各种各样的框架可以拿来直接使用.相比flask,django自带的框架确实要多很多.比如这一章就要介绍的用户登录.Django拥有一个内置的认证(authenticat ...

  4. UI控件相关宏定义

    1.显示设置 1.1 view圆角和边框 /** 设置view圆角和边框 */ #define kViewBorderRadius(View, Radius, Width, Color)\ \ [Vi ...

  5. Linux之创建777权限的文件

    服务器中运行项目的时候,有时候会出现图片上传失败,查看报错原因才知道是文件夹没有写入权限导致上传失败. 方案1: 在使用Linux命令更改对应目录的权限 方案2: 在代码中创建文件夹的时候给予对应的7 ...

  6. Hawk-and-Chicken 强连通

    题意:一群人投票  票具有传递性  求出累计和最大的数和 哪几个人最大 强连通好题!!! 毫无疑问先强连通缩点 一开始打算拓扑排序求dis  但是发现拓扑排序会有重复累加的情况 那么就反向建图   当 ...

  7. python升级到版本3

    一.下载python3 下载python3版本 wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0a3.tgz 二.安装依赖包 sudo ...

  8. 浅识J2EE十三个规范

    前言 没有规矩不成方圆,学习J2EE,先来明白都有什么规范. 内容 1.JDBC(Java Database Connectivity)java数据库连接 a)为java开发人员提供了一个行业标准AP ...

  9. 洛谷P3648 [APIO2014]序列分割(斜率优化)

    传送门 没想到这种多个状态转移的还能用上斜率优化……学到了…… 首先我们可以发现,切的顺序对最终答案是没有影响的 比方说有一个序列$abc$,每一个字母都代表几个数字,那么先切$ab$再切$bc$,得 ...

  10. kuangbin专题七 HDU1540 Tunnel Warfare (前缀后缀线段树)

    During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...