移动web开发与需要适应3360移动设备的web开发移动web开发和pc端web开发没有本质的区别，还是HTML/CSS/JavaScript的技术移动端和pc端web开发的区别3360
1、浏览器不同
移动终端的浏览器与pc终端不同，谷歌浏览器苹果浏览器、UC浏览器QQ浏览器字节手机浏览器360安全浏览器Sogou浏览器猎豹浏览器等国内手机浏览器基于webkit内核进行修改因此，在移动端，只需为css3属性添加webkit前缀。 2、屏幕尺寸
移动设备大小不同(大小非常大，碎片激烈)安卓： 320 * 480480 * 800540 * 960720 * 12801080 * 19202 k屏幕4k屏幕iphp ne:640 *
移动端特点-手机端兼容性问题比个人电脑端小很多。 因为手机端的浏览器版本新(对H5的支持很好) -手机端的屏幕小，能放的内容少。 问题：如何解决布局时屏幕大小不匹配的问题？ - PC侧固定版心，使所有分辨率的电脑版心相同。 例如，京东-移动端：移动端不能设置版心。 移动端设备的屏幕本身很小，不适合设置版心。 因此，移动端多采用流布局(百分比布局)流布局，也称为百分比布局，是移动端开发中常用的布局方式之一。 流布局特点： -宽度自适应，高度固定。 并不是100%恢复设计图。 所有设备都无法非常真实地恢复设计图。 有些设备显示得不是特别漂亮。 但是，流媒体布局是移动端非常常用的布局方式，比较简单，需要掌握(图纸、京东) 4、视口视口(重要)
问题：在电脑网站上，用手机端访问会有什么样的效果？ 1 .在手机方面，html的大小都是980px。 为什么？ 这主要是由于历史原因。 移动设备刚流行的时候，网站多是pc端的，pc端的页面宽度一般较大，移动设备的宽度较小，所以如果pc端的页面直接在移动端显示，页面就会混乱。 为了解决这个问题，移动端的html大小直接决定为980px (因为早起的pc端站点的版主有很多980px )。 2 .视口位于pc侧。 默认情况下，html大小继承浏览器宽度(浏览器宽度)，html大小为多少，但移动端添加了视口概念(skdmz )，视口是移动端的虚拟布局区域，以及视口视口3 .在当前移动页面上，视口设置的默认值无疑为980px。 这是因为如果设备宽度不足，视口将缩放，页面显示将变得不好看。 视口参数设置//width设置视口宽度//width=device-width将视口宽度设置为设备宽度(常规)。 //initial-scale初始缩放//initial-scale=1.0设置允许用户在//user-scalable设置中按//user-scalable=no设置//maxiable 请勿设置最小缩放比//minimum-scale=1.0，因为已禁用用户缩放。 //标准表记：//快捷键： meta:vp tab键metaname=' viewport ' content=' width=device-width，user-scalable=no， 通常以英寸测量。 如下图所示，1英寸=2.54
屏幕分辨率通常用像素度量，表示屏幕的水平和垂直像素数。 例如，1920*1080表示屏幕在垂直和水平方向上分别有1920和1080个像素点，大小相同，分辨率越高则越清晰，如下图所示。
像素：计算机显示设备的最小单位，即1像素点的大小。 像素是相对长度的单位，屏幕分辨率越高的设备像素点越小，屏幕分辨率越低像素点越大。
物理像素和css像素物理像素设备上的像素在同一设备上固定物理像素。 这是制造商出厂设置的，其中一个设备的分辨率是固定的。 css像素的逻辑像素，视口的小检查。 css样式代码使用逻辑像素。 在一个设备上，如果物理像素和逻辑像素相同，就不会出现任何问题。 但是在iphone 4上，物理像素数为640px960px，逻辑像素数为320px*480px。 因此，有必要
要使用大约4个物理像素来显示一个CSS像素。像素比物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。获取设备的像素比window.devicePixelRatio //物理像素与CSS像素的比值2倍图与3倍图（重要）(一般操作background-size属性,等比例缩小)
在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。 设备像素比devicePixelRatio：即像素的压缩比例结论 ：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。【演示：2倍图】
移动端调试问题
1. 模拟器调试2. 真机调试：使用手机进行访问。手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。Less简介
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。(less css预处理器)本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。学习网站： 中文网: http://lesscss.cn/less的编译 (如何把less文件变成css文件)
1.引入less.js文件（了解）
必须指定rel的类型是stylesheet/less <link rel="stylesheet/less" rel="external nofollow" href="less/01.less"><script src="less.js"></script>注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。缺点：1. 需要多引入一个less.js文件2. 需要多一次http请求，file协议打开无效3. 无法实时的看到编译的结果。2.使用考拉
koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。考拉官网: http://koala-app.com/index-zh.html
使用步骤：1. 把less文件夹拖进去2. 会在当前目录生成一个css目录3.VScode 安装 Easy LESS 插件
Less语法less初体验新建一个less文件，输入以下代码:@color:red;p { color:@color;}可以看到，webstorm自动的帮我们生成了对应的css文件。
注释
/*这个注释是CSS中的注释，因此会编译到css中*///这个注释,CSS中用不了，因此不会编译出来。变量
@charset "UTF-8";@wjs_color:#e92322;body { background-color: @wjs_color;}div { width: 400px; height: 400px; border: 1px solid @wjs_color;}mixin混入
混入样式类
@charset "UTF-8";//混入.btn { width: 200px; height: 50px; background-color: #fff;}.btn_border { border: 1px solid #ccc;}.btn_danger { background-color: red;}.btn_block { display: block; width: 100%;}//混入其他类的样式。.my_btn { .btn(); .btn_block(); .btn_border(); .btn_danger();}编译后的css
@charset "UTF-8";.btn { width: 200px; height: 50px; background-color: #fff;}.btn_border { border: 1px solid #ccc;}.btn_danger { background-color: red;}.btn_block { display: block; width: 100%;}.my_btn { width: 200px; height: 50px; background-color: #fff; display: block; width: 100%; border: 1px solid #ccc; background-color: red;}缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。混入函数
不带参数的函数
@charset "UTF-8";//不会被编译.btn() { width: 200px; height: 200px; background-color: #ccc;}.my_btn { .btn();}带参数的函数
.btn_border(@width) { border: @width solid #000;}.my_btn { //如果函数定义了参数，调用的时候必须传入参数，否则会报错 .btn_border(); //传入参数，就不会报错 .btn_border(10px);}带默认值的函数
.btn_border(@width:1px) { border: @width solid #000;}.my_btn { //因为有默认值，所以不会报错 .btn_border(); //传入参数，会覆盖1px，也不会报错 .btn_border(10px);}嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
-使用伪类的时候 可以使用& 表示自己
@charset "UTF-8";.wjs_header { border-bottom: 1px solid #ccc; }.wjs_header .header_item { height: 40px; line-height: 40px; text-align: center; border-left: 1px solid #ccc; }.wjs_header .header_item:first-child { border-left: none; }导入
@charset "UTF-8";@import "01-variable";@import "02-maxin";@import "03-mixin02";@import "04-book"; 模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。函数
在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。
http://www.1024i.com/demo/less/reference.html