01-移动web开发
01 view port
手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的
viewport的概念
移动设备上,用来显示网页的区域如果把移动设备的浏览器(也有可能是app中的webview)当做相框的话，viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜Sublime生成任意内容:lorem+tab
修改viewport出现,提升用户体验移动web常见设置
我们可以通过meta标签去修改viewport的值，防止滚动条
<meta name="viewport'
content="width=device-width
initial-scale=1.0，maximum-
scale=1.0，user-scalable=0">
该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的。后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的可选值
.width:
0设置layout viewport的宽度，为一个正整数，或字符串“width-device'.initial-scale:0设置页面的初始缩放值，为一个数字，可以带小数.minimum-scale:九计用户的最小猫放且、华认上数.maximum-scale.0允许用户的最大缩放值，为一个数字，可以带小数
. height:
o设置layout viewport的高度，这个属性对我们并不重要，很少使用
·user-scalable:
0是否允许用户进行缩放，值为“no“或“yes”,no 代表
不允许，yes代表允许
移动web样式注意
移动端开发不同于桌面端开发,需要注意一些细节
点击高亮效果在移动端测览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。
·css代码
-webkit-tap-highlight-color:transparent;/清除a点击高亮
效果/
盒子模型
通过css3的新属性box-sizing我们能够让盒子有限顾及自
己的尺寸而不是内容,避免出现多余的滚动条
css代码
/*设置宽度以边框开始计算*/-webkit-box-sizing:borderbox;/webkit内核兼容性写法//* 保证 内容的大小不变 */box-sizing:content-box;/* 保证盒子大小不变 内容可能会变 移动端设置 所有的盒子 都是border-box 目的 保证 盒子大小不变 */box-sizing:border-box;
Input默认样式清除在移动设备的浏览器中input标签一般会有默认的样式通过border=none,outline=none无法去除,比如立体效果,3d效果等等,我们需要添加下列样式
css代码
/在移动端清除浏览器默认样式/
-webkit-appearance: none;
最小宽度和最大的宽度
考虑到移动设备在大尺寸的的屏幕不会过度缩放失去清
晰度,在小尺寸的屏幕中不会出现布局错乱的问题
css代码
0注下列代码取值不是固定的,根据实际情况需要进行调整
max-width:640px;/在行业当中的移动端的设计图一般使用的是640px/
min-width:300px;/在移动设备当中现在最小的尺寸320px/
02项目:京东移动站
视网膜屏幕
分辨率 跟 像素点关系 是2倍关系的有
4,4s,5,5s,se,6
bplus 6splus
iphone5分辨率320568,屏幕中的像素点6401136
肉眼看不清 最小的 像素点
左右两张的无限轮播
最左边 加上最后一张图
最右边 加上第一张图
默认给用户看的如果用索引来说是索引为1的
touch
·touchstart:手指触摸时触发
·touchmove:手指在屏幕上滑动时连续触发
touchend:当手指离开屏幕时触发
事件参数中能够获取移动的一些属性
dom.addEventListener('touchstart',f
unction(e){
console.log(e.targetTouches)
//目标元素的所有当前触摸
console.log(e.changedTouches);//最
新更改的所有触摸
console.log(e.touches);//所有的
触摸
first-child,nth-child
需要考虑 其他的兄弟节点如果是多种兄弟混合排布写
的时候 就较为复杂
first-of-type:找到第一个这种类型的标签,
last-of-type:找到最后一个 这种类型的标签!
nth-of-type(2)找到索引为 设置值的 某一类元素
div h3:first-of-type{
background-color
darkorange
div h3:last-of-type{
background-color
yellowgreen;
div p:nth-of-type(2){
background-color
darkgoldenrod
/* 这种 会将 所有的 子节点 都算进去
*
div p:nth-child(2){
color: red;
div p:nth-child(3){
color:yellow
过渡事件
window.onload =function
document.querySelector("div").oncli
ck = function
this.style.backgroundColor =
red'
// 添加事件 监听
transitionEnd
// transitionEnd 是c3中退出
的 新属性 新属性对应的 新事件 浏览器厂商
需要添加 私有前缀
document.querySelector("div").addEv
entListener(
ransitionEnd'functio
console.log('过渡结束
了');
//过渡结束事件
document.querySelector("div").addEv
entListener('webkitTransitionEnd',f
unction
console.log('过渡结束了
添加了浏览器前缀的方法')
this.style.borderRadius
图片分辨率问题
ios中会准备多张图片
早期的web开发中也会准备多张图片
现在流行的是准备一张大图,然后进行压缩
移动端屏幕适配布局方式
宽度百分比(自适应),定高
viewport
抽取通用样式
目的是:
方便使用
将常用的样式 定义为通用的资源 使用的时候 直
接添加class即可
学习布局
,用通俗的话 描述 css,建议 花半个小时
学习CSS布局:
去看看
移动京东站首页js效果
顶部通栏渐变色
倒计时
轮播图自动轮播
过度结束车件
需要使用 addEventlistener的方式添加
默认的方法名为transitionEnd
由于浏览器兼容性问题 可能需要添加前缀
webkitTransitionEnd
mozTransitionEnd
msTransitionEnd
oTransitionEnd
移动端特有事件
touch
touchstart
事件参数中 有触摸点的值
touchmove
事件参数中 有触摸点的值
touchend
事件参数中 没有触摸点的值
注意:不能通过dom.ontouchstart的方式去绑定
只能addEventlistener的方式进行绑定
只在移动设备上支持
常见的封装
左滑,右滑
捏合
等等这些事件 都是基于 touch三个事件的封装
03Less
Less(LeanerStyleSheets的缩写)是一种向
后兼容的 CSS 语言扩展。
为CSS的赋予了动态语言的特性
变量、继承、运算、函数等，更方便CSS的编写和维护
因为Less 看起来就像CSS，所以学习起来很容易
Less 只对CSS 语言做了一些方便的补充，这也是它可
以学得这么快的原因之一
运行less的两种方式
1.vscode中安装EasyLess
2.使用CON引入js
Less.js 中文网
3.1变量
@width: 10px
@height: @width + 10px
#header
width :
@width;
height :
@height;
转化成css后
#header
width:10px
height:20px
3.2混入
混入是一种将一组属性从一个规则集中包含(“混合进
入”)到另一个规则集中的方法。所以说我们有以下
类
bordered {
border-top
dotted 1px black
border-bottom:
solid 2px black
我们希望在其他规则集中使用这些属性。好吧，我们
只需要放入我们想要属性的类的名称，如下所示
#menu a{
color:#111;
bordered();
.post a {
color: red;
.bordered();
.bordered类的属性现在将出现在#menua和.post
a中。(请注意，你也可以将#ids用作混入。)
3.3嵌套
Less 使你能够使用嵌套代替级联，或与级联结合使
用。假设我们有以下CSS
#header
color:black
#header .navigation {
font-size:12px
#header .logo {
width:300px
在Less中，我们也可以这样写
#header {
color: black
.navigation {
font-size:12px
.logo {
width: 300px
生成的代码更加简洁，并且模仿了HTML的结构。你还
可以使用此方法将伪选择器与混入打包在一起。这是
经典的 clearfixhack，重写为混入(&代表当前选择器
父级)
.clearfix f
display: block
Zoom:
&:after
content
display: block
font-size:0;
height: 0;
clear: both;
visibility: hidden
}
嵌套的 @规则和冒泡
诸如 @media或 @supports之类的@规则可以以与选
择器相同的方式嵌套。@规则放在最前面，与同一规
则集中其他元素的相对顺序保持不变。这称为冒泡
.component
width: 300px
@media(min-width:768px){
width:600px
@media
(min-resolution :
192dpi)
background-image
url(/img/retina2x.png)
@media(min-width:1280px){
width:800px
}
}
.component
width:300px
@media(min-width:768px){
component
width:600px
@media(min-width:768px)and(min-
resolution:192dpi){
.component {
background-image
url(/img/retina2x.png)
@media(min-width:1280px){
component {
width:800px
3.4操作
算术运算+、-
、/可以对任何数字、颜色或变量进行运算 。如果可能，数学运算会考虑单位并在加、减
或比较之前转换数字。结果在最左边有明确说明的单位类型。如果转换不可能或没有意义，则忽略单位不可能转换的例子:px到cm或rad 到%。
3.5转义
转义允许你使用任意字符串作为属性或变量值
~"anything"或~'anything'中的任何内容都按原样
使用，除了插值(详见官网高级指南)之外没有任何变
化。
@min768:
~"(min-width:768px)"
.element f
@media @min768 f
font-size:1.2rem
结果是
@media(min-width:768px){
element
font-size
:1.2rem
注意，从Less3.5开始，你可以简单地写
@min768:
(min-width:768px);
element {
@media @min768
font-size:1.2rem
3.6函数
Less 提供了许多函数，可以转换颜色、操作字符串和
进行数学运算。它们在官网的函数手册中有完整的记
录。
使用它们非常简单。以下示例使用百分比将0.5转换
为50%，将基色的饱和度增加5%，然后将背景颜色设
置为亮25%并旋转8度的颜色
@base: #f04615
@width: 0.5;
.class
width:percentage(@width);//
returns 、50%
color:
saturate(@base，5%);
background-color
spin(lighten(@base，25%)，8);
3.7命名空间和访问器
有时，出于组织目的或只是为了提供一些封装，你可
能希望对混入进行分组。你可以在Less中非常直观地
做到这一点。假设你想在 #bundle 下打包一些混入和
变量，以供以后重用或分发
#bundle(){
button
display: block
border:1px solid black
background-color: grey
&:hover
background-color:white
.tab { ... }
.citation{...}
}
现在如果我们想在我们的#header a中混合.button
类，我们可以这样做:
#header a {
color: orange
#bundle.button();// can also be
written as #bundle >.button
3.8映射
从Less3.5开始，你还可以使用混入和规则集作为值映
射。
#colors(){
primary: blue
secondary:green
.button {
color:#colors[primary]
border:1px solid
#colors[secondary]
输出
.button {
color: blue
border:1px solid green:
3.9作用域
Less中的作用域与CSS中的作用域非常相似。首先在本地查找变量和混入，如果找不到，则从“父级”作用
域继承 。
@var :
red
#page {
@var: white
#header {
color:(
@var;//white
与CSS 自定义属性一样，混入和变量定义不必放在引
用它们的行之前。所以下面的Less 代码与前面的例子
是一样的:
@var:red
#page
#header
color:
@var;// white
@var: white
3.10注释
块式注释和行内注释都可以使用
/* One heck of a block
* style comment!*/
@var: red
// Get in line!
@var: white
3.11导入
你可以导入一个.less文件，其中的所有变量都将可
用。可选地为.less文件指定扩展名。
@import "library";// library.less
@import "typo.css'
04移动端click事件的触发会延迟200
毫秒
为了提升用户体验,能够实时触发
一般会自己封装一个 叫做 tap的方法
手指快速点击
touch的事件只有三个
左右滑动,长按都是封装出来的
如何算tap事件(手指点上去 不移动快速松开)
touchstart
记录开始时间
touchmove
手指不动是不会触发的
只要能够执行这个方法就默认认为失效
不移动逻辑 可以再这里处理
touchend
记录跟开始时间的差值
05响应式
基本概念
针对所有设备
目的是开发一次即可
会根据设备的屏幕尺寸改变而改变布局
技术的选取
老项目
推出的时候手机还没有今天这么流行
重新开发一个移动端的站点
新项目
直接做响应式站点
性能考虑
在时间,金钱允许的情况下 各开发一个版本
是最好的
响应式网站的缺点
代码较多
维护较为复杂
工作中是否选用
看leader(组长,技术经理)
选择项目使用的 技术
开发时间
一般情况 是快于 1+1
直接使用js 也是能够实现该效果的 只不过 可能代码
较多
直到CSS3中推出了媒体查询
就是 可以通过css 去获取 一些 设备的信息
媒体查询
一定要记得写空格,如果漏写空格 会出现无效的情况
空格可以多些
语法
@media screen and(max-width: 1000px)
屏幕尺寸小于等于1000px的时候引用括号
内的样式
@media screen and (min-width: 480px)
屏幕尺寸大于等于 480px的时候使用括号内
的样式
每一个@media中都可以写多个元素的样式
前面的样式会被后面的样式覆盖
06bootstrap--前端框架
完全基于HTMLCSS Javascript(Jquery)的一个框架。完全
封装，不需要关心原理，只要掌握规则，会使用即可。
使用时，只需写HTML结构，css类名，加上自定义属
性，就可以实现很多功能。
缺点:样式比较单一，想要定义个性化的样式，还需要
增加额外代码，适合对样式没有太多要求的网站。
优点:
1.适应移动端(手机页面)
2.主流浏览器支持(ie6-ie8不支持 )
4.响应式布局，可定义四种移动设备。(手机，平板
笔记本，台式机)
5.开源，兔费
使用:
1.下载框架文件 Bootstrap中文网
中文官网
V3.bootstrap.com
2.解压文件--包含三个文件夹--css，js,fonts
3.引入jquery文件
4.新建html5页面，如果使用手机端时(需要加上头
部声明)，引入boostrap.min.css,
boostrap.min.js
满足以上条件，就可以使用bootstrap框架
网格布局实现原理:至少有三层
1.最外层 class=“containter"定义一个响应式的区域，宽度会随之变化
containter-fluid:类似于宽度100%
2.中间层 class=“row"定义一个行，类似于表格中的
tr
3.最内层使用若干个列，class=“col-**-$$”
四种设备
lg--大型设备(台式机)--大于1170px
md--中型设备(笔记本)--大于970px
sm--小型设备(平板)--大于750px
xs--超小型设备(手机)--小于750px
$$--代表 1-12
网格布局将容器的宽度，平分为12份，可设置元素在不
同的设备下的所占份数，从而实现了响应式布局。
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta http-equiv="X-UA-
Compatible" content="IE=edge"
<meta name="viewport" content='
width=device-width,initial-
scale=1">
<!--上述3个meta标签*必须*放在最前
面，任何其他内容都*必须*跟随其后!-->
<title>Bootstrap 101
Template</title>
<!-- Bootstrap>
<link href="css/bootstrap.min.css
rel="stylesheet">
<!-- HTML5 shim and Respond.js
for IE8 support of HTML5 elements
and media queries -->
<!-- WARNING: Respond.js
doesn't work if you view the page
via file:// -->
<!--「if lt IE 9]>
<script
src="//cdn.bootcss.com/htm15shiv/3.7.2/html5shiv.min.js"></script>
<script
src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界!</h1>
<!-- jQuery(necessary for
Bootstrap's JavaScript plugins)-
<script
src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled
plugins(below),or include
individual files as needed --
<script
src="js/bootstrap.min.js">
</script>
</body></html>
按钮
可作为按钮使用的标签或元素
<a>、<button>或<input>元素添加按钮类(button
class)即可使用 Bootstrap 提供的样式
Link
<button class="btn btn-default'
type="submit">Button</button>
<input class="btn btn-default"
type="button" value="Input">
<input class="btn btn-default"
type="submit" value="Submit">
针对组件的注意事项
虽然按钮类可以应用到<a>和<button>元素上，但是
导航和导航条组件只支持<button>元素:
链接被作为按钮使用时的注意事项
某些功能--而不是用于链接其他页面或链接当前页面中
的其他部分，那么，务必为其设置role="button"属
性。
<!--
Standard button -->
<button type="button" class="btn
btn-default">(默认样式 )
Default</button>
<!-- Provides extra visual weight
and identifies the primary action
in a set of buttons
Lyoe
btn-primary">(首选项)
Primary</button>
<!-- Indicates a successful or
positive action --
<button type="button"c
class="btn
btn-success">(成功)
Success</button>
<!-- Contextual button for
informational alert messages
-->
<button type="button" class="btn
btn-info">(一般信息)Info</button>
<!-- Indicates caution should be
taken with this action --
<button type="button"(
class="btn
btn-warning">(警告)
Warning</button>
potentially negative action -->
<button type="button" class="btn
btn-danger">(危险)Danger</button>
<!--Deemphasize a button by making
it look like a link while
maintaining button behavior
<button type="button" class="btn
btn-link">(链接)Link
</button>
尺寸
需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm 或
.btn-xs 就可以以获得不同尺寸的按钮。
通过给按钮添加.btn-block 类可以将其拉伸至父元素
100%的宽度，而且按钮也变为了块级(block)元素
激活状态
当按钮处于激活状态时，其表现为被按压下去(底色更
深、边框夜色更深、向内投射阴影)。对于<button>元
素，是通过:active 状态实现的。对于<a>元素，是通过
.active 类实现的。
禁用状态
通过为按钮的背景设置 opacity属性就可以呈现出无法
点击的效果 。
button 元素
为<button>元素添加disabled属性，使其表现出禁用状
链接(<a>)元素
为基于<a>元素创建的按钮添加.disabled 类
<button class="btn btn-default
dropdown-toggle" type="button'
id="dropdownMenu1" data-
toggle="dropdown" aria-
haspopup="true" aria-
expanded="true">
Dropdown
<span class='caret"></span>
</button>
<ul class="dropdown-menu" aria
labelledby="dropdownMenu1">
<li>Action
</li>
<li><a href="#">Another
action</a></li>
<li><a href="#">Something else
here</a></li>
<li><a href="#">Separated
link</a></li>
</ul></diy>
为.dropdown-menu添加.dropdown-menu-right 类可以
让菜单右对齐。
标题
在任何下拉菜单中均可通过添加标题来标明一组动
作。
<ul class="dropdown-menu" aria-
labelledby="dropdownMenu3">
<li class="dropdown-
header">Dropdown header</li>
...</ul>
分割线
为下拉菜单添加一条分割线，用于将多个链接分
组。
class="dropdown-menu" aria-
<UI
<li role="separator"
class="divider"></li>
...</ul>
禁用的菜单项
为下拉菜单中的<li>元素添加.disabled 类，从而
禁用相应的菜单项。
按钮组
<ul class="dropdown-menu" aria
labelledby="dropdownMenu4">
<li>Regular link
</li>
<li class="disabled"><a
href="#">Disabled link</a></li>
<li>Another link
</li></ul>
按钮工具栏
把一组<div class=“btn-group”>组合进一个<div
class=“btn-toolbar”>中就可以做成更复杂的组件
<div class="btn-
group" role="group" aria
label="
</diy>
<div class="btn-
group" role="group" aria-
label="
</div>
<diy class="btn-
group" role="group" aria-
label="
</div></div>
尺寸
<div class="btn-group btn-group
1g" role="group" aria-label=".‘’
..</div>
<div class="btn-group" role="group"
Aria-label=
</div>
<div class="btn-group btn-group.
sm" role="group" aria-
label="
</div>
嵌套
想要把下拉菜单混合到一系列按钮中，只须把.btn-
group放入另一个.btn-group 中
<button type="button"
'class="btn
btn-default">1</button>
<button type="button"
class="btn btn-default">2</button>
<div class="btn-
group" role="group">
<button type="button"
class="btn btn-default dropdown.
toggle" data-toggle="dropdown
aria-haspopup="true" aria-
expanded="false"
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown
link</a></li>
<li><a href="#">Dropdown
inK</a>
</ul>
</div></div>
排列
让一组按钮垂直堆叠排列显示而不是水平排列
<div class="btn-group-
vertical" role="group" aria-
label=".
/div>
两端对齐排列的按钮组
<div class="btn-group btn-group.
justified" role="group" aria-
label="
<div class="btn-
group" role="group">
<button type="button"
class="btn btn
default">Left</button>
/oiV>
<div class="btn-
<button type="button'
class="btn btn-
default">Right</button>
</div></div>
按钮式下拉菜单
把任意一个按钮放入.btn-group中，然后加入适当
的菜单标签，就可以让按钮作为菜单的触发器了。
<button id="dLabel" type="button'
data-toggle="dropdown" aria.
haspopup="true" aria-
expanded="false'
Dropdown trigger
class="caret"></span>
<span
</button>
<ul class="dropdown-menu" aria-
labelledby="dLabel"
</ul></div>
<!--Single button --><div
class="btn-group"
<button type="button" class="btn
btn-default dropdown-toggle" data-
toggle="dropdown" aria-
haspopup="true" aria-
expanded="false"
Action <span class='caret">
</span>
</button>
<ul class="dropdown-menu"
<li>Action
</li>
<li><a href="#">Another
action</a></li>
<li><a href="#">Something else
here</a></li
class="divider"></li>
<li><a href="#">Separated
link</a></li>
</ul></div>
<!-- Split button --><div
class="btn-group"
<button type="button"
'class="btn
btn-danger">Action</button>
<button type="button"
class="btn
btn-danger dropdown-toggle" data
toggle="dropdown" aria-
haspopup="true" aria-
expanded="false">
<span class="caret
></span>
<span class="sr-only">Toggle
Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li><a href="#">Another
action</a></li>
<li><a href="#">Something else
here</a></li>
<li role='
separator
<li><a href="#">Separated
link</a></li
</ul></div>
<!-- Large button group
--><diV
class="btn-group"
<button class="btn btn-default
btn-lg dropdown-toggle'
type="button" data.
toggle="dropdown" aria.
haspopup="true" aria
expanded="false">
Large button <span
class= caret
></span>
</button>
RFNPR
<ul class="dropdown-menu">
</ul></div>77 <!-- Small button group--><diV<button class="btn btn-defaultbtn-sm dropdown-toggletype="button" data.toggle="dropdown" aria.haspopup="true" aria-expanded="false"Small button <spanclass="caret"></span>
</button>
<UI
class="dropdown-menu">
</ul></div>
<!-- Extra small button group<div class="btn-group"btn-xs dropdown-toggletype="button" data.toggle="dropdown" aria-haspopup="true" aria-expanded="false"
<button class="btn btn-default
Extra small button <span
class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul></div>
<div class="btn-group dropup'
<button type="button" class="btn
<button type="button"
class="btn
btn-default dropdown-toggle" data.
toggle="dropdown" aria.
haspopup="true" aria-
expanded="false"
<span class="caret"
></span>
<span class="sr-only">Toggle
Dropdown</span>
</button>
<UL
class=
dropdown-menu
<!-- Dropdown menu links -->
</ul></div>
6973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
