关键词：
一篇真正教会你开发移动端页面的文章(一)
一 什么是像素？
像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义：
设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。
1 web前端领域，像素分为设备像素和CSS像素
2 一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。缩小的时候，一个css像素会变小；
一般一个css像素等于一个设备像素scale=1，苹果屏幕高密度一个css像素里大概4个物理像素。当缩小页面时，很多个css像素才对应了一个设备像素。
二 三个视口
一个块元素默认的宽度是其父元素的100%，body的宽度是html的100%；那html是基于谁的呢？
记住一句话：视口是html的父元素，所以我们称视口为初始包含块。 这样你就明白了，html元素的百分比是基于视口的。
好了，移动端的三个视口介绍完了，让我们总结一下：
1 在PC端，布局视口就是浏览器窗口
2 在移动端，视口被分为两个：布局视口(680-1024px，适应pc某些网站，web开发对应的css视口)、视觉视口(眼睛看到的大小)
3 移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）
4 我们的css是基于布局视口
这告诉浏览器把布局视口设为理想视口:<meta name="viewport" content="width=device-width"/>
width指的是布局视口的宽；device-width指理想视口的宽度；
三 设备像素比（DPR：device pixel ratio）
成立前提，缩放比是1 ；
设备像素比dpr = 设备像素个数 / 理想视口css像素个数（device-width）
打开浏览器调试工具：
1 iphone5的理想视口是：320*568 device-width：320 device-height：568
2 iphone5的设备像素比是2
根据公式可知，iphone5的设备像素是：640*1136；
缩放：
公式前提是缩放比是1，css像素的大小是可以变的，缩放从技术实现的角度来讲，就是放大或者缩小css像素的过程，当你用双指放大缩小页面的时候，实际上就是放大或缩小css像素。
缩放：缩小放大的是css像素。
meta标签：
meta标签存在的目的主要是为了将布局视口宽设为理想视口的宽，语法如下：
<meta name="viewport" content="name=value"/>
其中content属性是一个字符串值，字符串是由逗号分割的 名/值 对组成，共有5个：
1 width：设置布局视口的宽
2 init-scale：设置页面的初始缩放程度
3 minimum-scale：设置页面最小缩放程度
4 maximum-scale：设置页面最大缩放程度
5 user-scalable：是否允许页面对用户进行缩放操作
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
意思是：让布局视口的宽度等于理想视口的宽度，页面的初始缩放比例及最大最小缩放比例是1，不允许用户对页面进行缩放
媒体查询：
媒体查询是响应式设计的基础，有三大特点：
1 检测媒体的类型，比如：screen，tv等
2 检测布局视口的特性，比如：宽 高 分辨率等
3 特性相关查询（对web开发无用）
css中使用媒体查询的语法：
@media 媒体类型 and （视口特性阀值）{
//满足条件的css样式代码
}
实例：
@media all and (min-width: 321px) and (max-width: 400px){
.box{
background: red;
}
}
上面代码中，媒体类型为all，代表任何设备，并且设备的布局视口宽度大于等于321px且小于等于400px时，让拥有box类的元素背景变红。
教会你开发移动端页面的文章
之前分享过一篇文章《教会你开发移动端页面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面 好了，让我们开始吧，... 查看详情
探究移动端开发
什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。并且现在手机上的app有一部分也是h5页面，对于Android系统的手机，我们打开手机上的开发者选项，开启显示布局边界，如果发现页面有布局则是native，否则是... 查看详情
rem
...移动端的小伙伴都非常头疼的一个问题，这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案，希望能够帮助到一些从PC端转战web移动开发的小伙伴，因为是第一次写博文，写得不好的地方也希望大... 查看详情
移动端web开发
这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活和好维护。如果你希望你的页面能适配包括PC端在内的任何设备，那么下面几个小工具可以方便你顾及旧版本IE所... 查看详情
移动端web开发基础知识(代码片段)
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面移动端页面：单独制作移动... 查看详情
pycharm怎么用，一篇教会你(代码片段)
文章目录一、界面介绍二、设置中文（无需汉化包）三、常用快捷键四、Python标识符和关键字1、标识符2、关键字五、行和缩进六、Python引号七、Python注释1、单行注释2、多行注释八、Python空行九、输入和输出1、print输出2... 查看详情
移动端触摸（touch）事件(代码片段)
...我们要做的就是接受未知的挑战。正如你所看到的，这是一篇关于移动端触摸事件的文章，也就是我们平时在手机中用得最多的动作：touch。现在让我们开始touchtouchtouch吧！Touch事件首先touch包含三类事件，它们分别是：touchstart... 查看详情
十分钟通过一个实际问题，真正教会大家如何解决bug(代码片段)
...够明白如何在程序中发现问题，定位问题，解决问题。并真正理解那些问题解决思路。首先说说这个实际问题是什么，又是怎么遇到的。我这边做了一个操作日志模块，需要提供独立查询页面。正好集团内部有一个xxx前端产品，... 查看详情
移动端html5开发选择方案
如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是模块... 查看详情
移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识。 今天着重来讲解移动端的适配方案。 做PC端页面的工程师聊的最多的是兼容，这是因为浏览器之间的差异引起的。而移动端基本是没有兼容问题的，全... 查看详情
reactjs适合移动端的web页面开发吗
react是适合移动端页面开发的，react是一个用于构建用户界面的JavaScript库，适合的场景是将后端复杂的数据显示在复杂前端复杂的界面上，是非常适合做移动端页面的。1、声明式React可以非常轻松地创建用户交互界面。为你应用... 查看详情
移动端响应式
...针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。 ... 查看详情
移动端页面开发流程
...pp分类1、NativeApp原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C2、HybridApp混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应用3、WebApp基于Web的app手机应... 查看详情
html5移动端手机网站开发流程
...果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。二、把html5这门 查看详情
5分钟教会你用python采集csdn的热榜(代码片段)
上次发了一篇《热榜标题词云实时更新词云上线，给标题起名提供参观建议》，今天突然上热榜一一段时间，还被范博at了。虽然对上热榜本身已经无感，但是被范博at还非常让我高兴的。这到晚上后，有人在... 查看详情
如何造一个『为移动端而生』的日历(代码片段)
之前写了一篇Calendar-『为移动端而生』的自定义日历，一直有童鞋对这个插件的手势处理存在一些问题，所以想写篇文章，来说说它的成长史~在阅读本文之前，确保你有稍微看过calendar的效果喔~点击查看github，查看calendar源码也... 查看详情
移动端响应式(代码片段)
...针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。 ... 查看详情
移动端web怎么循序渐进地开发一个移动端页面
1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础，那么到底什么才是一个像素呢？像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，Web前端开发领域，像素... 查看详情