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

从这章开始,学习移动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。

考拉官网

使用步骤：

1. 把less文件夹拖进去

2. 会在当前目录生成一个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引入到一起即可。