前期准备
流式布局
- 就是百分比布局,通过盒子的宽度设置成百分比,根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。容器的百分比都是相对于其直接父元素计算的。是移动web开发常用的布局方式!
- 全屏页面
.container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } /*容器设置固定定位之后,脱离标准流,宽高的百分比就是相对与浏览器窗口来算的,所以设置固定定位之后,就可以全屏*/
- 利用overflow:hidden制作一边固定宽,一边自适应的容器
div:first-child { width: 100px; height: 100px; background-color: pink; float: left; } div:last-child { overflow: hidden; } /*利用overflow:hidden;的bfc特性,制作绝缘盒子,左边盒子左浮,右边盒子自适应*/
Viewport视口
- 认识viewport:viewport是仅在移动端存在的,用来盛放网页内容的虚拟容器,可以设置宽高,设置缩放比,设置是允许用户缩放。也就是我们的视觉窗口。
- 移动端适配标准
- 网页的宽度和浏览器(设备)的宽度保持一致
- 网页的缩放比1:1的缩放比
- 不允许用户自己缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <!--width:设置容器的宽度,device-width就是设备--> <!--user-scalable,设置是否允许用户缩放,yes/1为允许,no/0为禁止--> <!--initial-scale,设置视口的缩放比,标准取值1.0,取值范围0-10--> <!--maximum-scale=1.0,最大缩放比为1.0--> <!--minimum-scale=1.0,最小缩放比 为1.0--> <!--emmet快捷语法 meta:vp + tab-->
移动端事件 Touch
touch事件最初只是在苹果设备上使用的,由于移动设备的发展,导致touch虽然不是行业标准,但是移动端的支持却是非常好。
- touchstart 手指开始触摸屏幕是触发事件
- touchmove 手机在屏幕上移动时,连续触发事件
- touchend 手指离开屏幕时,触发事件
- touchcance 触摸事件被意外事件(如来电话,或弹窗)终止时触发,使用较少
- 触摸事件的响应顺序
- touchstart
- touchmove
- touchend
- onclick 300ms延时
- Touch事件的事件对象
- 都是触摸点坐标的集合(会有多点触摸)
- changedTouches 触发事件时,改变的触摸点在屏幕的坐标点集合
- targetTouches 所有触摸点在绑定事件的元素上的坐标点
- touches 所有触摸点在屏幕上的坐标点集合
- 坐标包含的信息
- client 视口的坐标
- page 页面的坐标
- screen 屏幕的坐标
- tap事件
- click在移动端的响应事件是300ms
- tap是由前端框架或者库封装来的,响应速度比较快。
- 由于移动设备的特殊性,click事件在移动端的响应速度是300ms,tap事件的速度比较快,所以在移动端设置点击事件,需要使用tap
进击的bootstrap
响应式开发
- 随着移动互联网的迅速发展,我们的pc端的页面已经不能满足移动设备的阅读需求,
- 通常的做法是,单独开发一个移动版的网站,但是随着由于设备类型的复杂和增多,我么需要开发一个响应式的网站,可以根据设备的不同自动适应为不同版本的页面,
- 简而言之就是开发一个页面兼容多个终端。随着移动设备的增多,新建的网站普遍采用这种方式
- 开发原理,利用css3中的媒体查询media,通过查询screen的宽度来指定某个宽度区间的网页布局
- 超小屏幕(移动设备) 768px以下 版心宽100%
- 小屏设备 768px-992px之间 版心宽750px
- 中屏设备 992px-1200px之间 版心宽970px
- 大屏设备 1200px以上 内容版心宽1170px
- media 媒体查询的使用
也可利用覆盖原则,使用单向覆盖媒体查询,减少代码/*需要查询的屏幕 加条件需要 and 中间需要空格*/ @media screen and (min-width: 1200px){ /*设置样式css代码*/ }
初识bootstrap
- 简介
- 作者:twitte两位前端工程师,在2001年开发完成。
- 当前最流行的前端UI框架(有预制界面组件)
- 一个前端技术网站 www.awesomes.cn
- 特点:简洁,直观,强悍的前端开发框架,让web开发更迅速,更简单,
- 优点:持续更新,拥有简洁直观强悍的组件,有定义好的ui组件样式,但是自定义扩展性强,方便修改默认样式
- 版本:
- 2.xx 停止维护
- 优点:兼容性好
- 缺点:代码不够简洁,功能不够完善
- 3.xx 目前使用最多
- 稳定,但是放弃了IE6 IE7,对IE8支持,但是界面效果不好,偏向于开发响应式布局,移动设备优先的web项目。
- 4.xx 测试阶段
- 更偏向于响应式,移动设备,代码简洁
- 不支持IE8
- 2.xx 停止维护
- Map文件
- 通常在使用压缩版的js和css文件时,如果出错,浏览器就会提示那一行出错。Map就是记录了代码位置的文件。
入门bootstrap
- Normalize.css
- 响应容器
- 栅格系统
less快速入门
安装
-
less是要基于node.js运行的,所以需要先安装node.js.
- 查看node.js版本:node -v
- 查看npm版本 npm -v
-
在线安装less
npm install -g less
-
离线安装less
- 路径C:\Users\对应用户名\AppData\Roaming\npm
- 查看less版本 lessc -v
入门简介
- 简介 css是一门非程序语言,不利用复用,不方便维护及扩展,没有变量,函数,作用域等概念,less在css的语法基础上,引入了变量,运算及函数等功能,简化了css的编写降低了css的维护成本,less可以让我们用更少的代码做更多的事情。
- 原理 less包含一套语法及一个解析器,我们可以根据这些语法定义样式规则,最终会通过解析器,编译成对应的css文件。less不是来代替css的,而是在css的语法基础上,为css加入程序式语言的特性。
基础语法
- 变量
- less允许我们自定义变量,可以在全局样式中使用,使我们修改样式更方便假单。
//@charset "utf-8"; 头部添加这段代码防止中文乱码 //less中的注释会编译到css当中的 //这种注释不会编译到css中, /*这种注释会编译到css中*/ //定义变量 @wjsColor:#ccc; //变量名必须以@开头,不能以数字开头,不能包含特殊字符 a:hover{ color: @wjsColor; }
- Mixin混入
- Minxin类似js中的回调函数,把一个函数传入另一个函数内,定义函数时,在选择器后边加上括号,可以设置形参设置默认值,如果不传参数,就是使用默认值,调用的时候,在另一个选择器的样式内,传入实参即可。
@charset "utf-8"; //定义变量 @color: red; //定义函数,不会编译到css中 .w50(@width:50%) { width: @width; background-color: @color; } //定义函数,形参可以设置默认值 .fl(@fr:left) { float: left; } /*得到宽度50%背景颜色红色左浮动的样式*/ .w50fl { .w50(40px); .fl(right); }
网友评论