从这章开始,学习移动web

移动web开发指的是需要适配移动设备的网页开发,和pc端没有本质的区别,还是使用html,css,js

一.学习移动web的原因

1. 使用移动设备的用户越来越多

2. 一定设备屏幕大小不一,之前的pc端的开发不能解决屏幕适配问题

开发方式 : 流式布局(百分比布局) 伸缩布局响应式布局

二.屏幕(了解)

1.屏幕尺寸

指的是屏幕对角线的长度

2.屏幕分辨率

分辨率一般用像素来量px,表示屏幕水平和垂直方向上的像素数,

例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成

3.像素密度

每英寸能够容纳像素点的个数,像素密度越大,画画越精细,相反就越粗糙

4.设备独立像素

概念 : 设备独立像素本质上就是一个比例关系,不同设备有不同的比例关系

目的 :保证在不同设备上,让用户看到的元素大小一样

获取方式 : 可以通过js中的windoe.devicePixelRatio获取当前设备的比例值

5.长度单位介绍

我们在开发中常用的是px , em in(英寸) cm(厘米) 等

我们可以将上述的几个长度单位划分成相对长度单位和绝对长度单位

相对单位 : px em

绝对单位 : in cm

6. 像素 px

物理像素 : 当前设备宽度和高度

逻辑像素 : css设置的像素,与设备无关.,逻辑像素设置的大小会随着窗口的缩放变化

三. 多倍图

问题 : 图片在不同的移动设备上展示时,会存在失真

原因就是设备独立像素比不一样,图片在设备上可能会被拉伸

解决方案 : 在设计图片素材是,可以设计多倍图,一般都是2倍图或者3倍图

四.调试

1. 模拟器 : 谷歌 --> f12检查 -->

2. 真机调试 : 使用手机进行访问

五.视口 (重点)

1.PC端的视口

在PC端,视口指的是浏览器的可视区域,其宽度和浏览器的窗口保持一致

2. 移动端的视口

1. 布局视口默认视口分辨率为980px;一般可以默认通过手动缩放网页

2.视觉视口看到的可视区

3. 理想视口 视口宽度与设备宽度一致(设置百分比) width : 100%;

网页不能出现缩放(meta标签配置)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--视口宽度与设备宽度一致width=device-width, initial-scale=1.0最大缩放是1,禁止用户缩放maximum-scale=1.0,user-scalable=0
-->

六.less(重点)

1.Less 简介

less css预解析器

本质上,LESS包含一套自定义的语法和解析器,用户根据这些语法定义自己的额样式规则,然后通过解析器编译生成对应的CSS文件.less不能用来取代css的,而是现有的css语法的基础上为css加上程序式语言

less仅仅是写css的另一种方式,写出来的less文件浏览器也不能识别,,所以写完less文件,还需要通过less解析器解析成css,最终浏览器引入的还是css文件(visualcode可以按照这个解析器,自己保存就可以生产css文件)

2.less的编译

使用考拉

koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

考拉官网

使用步骤：

把less文件夹拖进去
会在当前目录生成一个css目录

VScode 安装 Easy LESS 插件

3. less语法

1. less初体验

新建一个less文件输入以下代码

@color:red;
p{color:@color;
}

可以看到,插件或者软件自动生成了对应的css文件

2. 变量

注释 : /* 这个注释会被编译到css中 */

// 这个注释,css中用不了,也不会编译出来

变量 :

@charset "UTF-8";
@wjs_color:#e92322;
body {background-color: @wjs_color;
}div {width: 400px;height: 400px;border: 1px solid @wjs_color;
}

3. mixin 混入

1. 混入样式类

@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中了

2.混入函数

不带参数的函数

@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);
}

4.嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

使用伪类的时候可以使用& 表示自己

@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;
}

5.导入

@charset "UTF-8";

@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。

移动web学习(一) --- 流式布局, 视口viewpoint ,2倍图和3倍图, less相关推荐

移动WEB开发之流式布局-京东案例
2. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...
移动WEB开发之流式布局
第一章:移动端: 1.1 移动端基础 1.2 视口 1.2.1布局视口layout viewport 1.2.2 视觉视口visual viewport 1.2.3 理想视口ideal viewpo ...
pink-移动web开发之流式布局
改变行高只是改变上下间距的大小, 目标: 知道移动WEB的开发现状写出标准的viewport 使用移动WEB的调试方法说出移动端常见的布局方案描述流式分布独立完成京东移动端首页 1. 移动端基 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
移动web基础：视口(viewport)，流式布局 JDM京东移动端开发
目标能够理解视口的概念并进行视口的设置能够说出流式布局的基本布局特征能够使用 2倍图进行页面开发能够实现京东首页的头部布局移动web基础移动端调试问题模拟器调试真机调试:使用手机进 ...
Web前端学习笔记09：移动web开发流式布局_flex布局
文章目录移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 i ...
Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
前端学习笔记之流式布局（百分比布局） 3.24
1 流式布局(百分比布局)概念流式布局,就是百分比布局,也称非固定像素布局. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 流式布局方式是移动web开发 ...
移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀为了兼容老版本私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...

移动web学习(一) --- 流式布局, 视口viewpoint ,2倍图和3倍图, less