二倍图的概念
二倍图就是设计人员在设计ui图的时候是参照手机的二倍来设计的
二倍图的作用：防止图片失真
####移动端调试的两种方法
- 模拟调试：用电脑的浏览器模拟手机端
- 真机调试
- 手机和电脑必须在同一个网络下
- 将页面以live server的形式打开
- 打开运行cmd输入ipconfig查找到无线局域网的wlan ipv4地址将ip地址复制之后将浏览器中的127.0.0.1替换掉
- 将地址用二维码生成器生成二维码，然后手机扫一扫即可
视口
视口就是用来承载网页内容的部分，也就是用户看见的展示区域
视口是由苹果推出来
内容是放在视口里面，内容的宽度也就是参照与视口，并不是参照与浏览器的窗口
- pc端视口的大小：默认和浏览器的可视区域一样大
- pc端视口的特点：
- 内容的宽度超过视口的宽度会出现滚动条
- 如果内容的宽度为100%；但是内容的子元素超过了父元素的宽度，会自动换行
- 如果内容的宽度为100%，子元素的宽度为百分比，并且这个百分比没有超过100%，就会同比例缩放
- pc断的视口没有什么太大作用，因为pc端视口和浏览器的可视区域一样大
- 移动端视口默认大小以及原因
- 移动端的默认视口：一般是980
- 为什么移动端视口为980：因为以前pc端的内容版心为960，苹果为了解决pc端的网页能够在手机端显示出来，所以将手机端的视口为980
- 默认为980如果是PC端的网页在手机端显示没有问题，无非就是被缩放了
- 默认为980如果网页是移动端，不是很好
- 移动端视口会出现什么问题？
- 移动端出现的问题：内容缩放
- 原因：内容的宽度参照视口，视口的宽度980，苹果5宽度320，将980的内容放到320的手机上自然缩放
- 怎么解决这不不合理的问题？
- 将布局视口的大小修改成手机屏幕大小即可
- layout viewport：布局视口，默认视口
- ideal viewport：手机屏幕大小
利用meta标签设置视口
- name：viewport，就是来设置当前meta标签是设置视口的，并且只在移动端起作用
- content=“width=device-width”：content里面的width就是设置视口的宽度，应该设置成device-width
- content=“initial-scale=1”：设置layout viewport：ideal viewport 1：1 适口：屏幕，为了兼容
- user-scalable：yes/no,设置页面是否能够用手指捏合进行缩放
- minimum-scale：最小缩放比
- maximum-scale：最大缩放比
- 注意用vscode生成的页面，没有user-scalable，自己要追加上
移动端浏览器
移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器：指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。
第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等
- 移动端站点的共同之处：搜索框、轮播图、导航、产品信息，就是因为手机端比较小
/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;
头部结构实现的三种方式
-
flex
左边宽度固定，右边也是宽度固定，中间给flex:1
-
padding
中间的元素设置宽为100%；padding:0 100px;默认是向外撑开，所以要设置盒模型，padding就会向里面撑开
两边的元素利用定位来实现
-
margin
中间元素，自动计算宽度，margin:0 100px;
两边定位上去
-
左边的logo：background-position: 0px -108px;
-
放大镜：background-position: -56px -108px;
#### 产品区域结构分析
结构分为上下结构，标题和内容
-
标题
-
内容
我们会发现内容不管怎么排列都是三张图片，而且具有共同的样式，宽50%；左浮动右浮动
所以准备好这三个样式
.a_50 { width: 50%; display: block; } .f_left { float: left; } .f_right { float: right; }然后当前这个元素需要什么就加哪个类名即可
-
图片边框注意不能给大图片，因为大图片切图时候有问题，通过给小图片设置左下边框
-
大图片通过白色背景掩饰
产品秒杀块
不要复制之前的结构重新写
<div class="jd_sk">
<div class="jd_sk_title">
</div>
<div class="jd_sk_content"></div>
</div>
搜索块js效果
当我们滑动页面的时候，设置搜索块的背景色的透明度
-
设置搜索块的背景色的透明度，在滑动页面的时候
注册window.onscroll -
在onscroll事件函数内部，设置搜索块的背景色的透明度
-
透明度= 滑出去的距离/轮播图的高度
-
获取滑出去的高度
offsetTop = document.documentElement.scrollTop || document.body.scrollTop -
获取轮播图的高度
var banner =document.querySelector(".jd_banner"); var bannerHeight=banner.offsetHeight; -
opacity= offsetTop/bannerHeight
-
得到透明度之后将透明度设置给搜索快的rgba
var search=document.querySelector(".jd_search"); search.style.backgroundColor="rgba(233,35,34,"+opacity+")"; -
判断如果滑出去的距离小于轮播图的高度设置背景色才是有意义的，如果要是大于了，则无意义
if(offsetTop < bannerHeight){ opacity=offsetTop/bannerHeight; /*设置样式*/ search.style.backgroundColor="rgba(233,35,34,"+opacity+")"; }
倒计时逻辑分析
- 首先定义一个总秒数
- 设置一个定时器，每个一秒，让总秒数减一
- 将减完的秒数转化成时分秒的格式
- 最后在将时分秒一次填入页面的dom元素里面即可
- 如果总秒数小于0，要清除定时器
轮播图结构修改
-
因为轮播图要实现前后可拖拽效果，所以要在首尾追加两张图片
-
利用js拿到第一个li
var banner=document.querySelector(".jd_banner"); var imgBox=banner.querySelector("ul:first-of-type"); var first=imgBox.querySelector("li:first-of-type"); -
将第一个利用clone拷贝一份之后
var clonefirstLi = first.cloneNode(true) -
利用appendChild将拷贝之后的li追加到ul结尾处
imgBox.appendChild(clonefirstLi); -
利用js拿到最后一个li
var last=imgBox.querySelector("li:last-of-type"); -
将最后一个li利用clone拷贝一份
var cloneLastLi = last.cloneNode(true) -
将拷贝之后的利用insertBefore插入到第一个li之前
imgBox.insertBefore(cloneLastLi,imgBox.firstChild);insertBefore有两个参数，第一个参数代表要插入的元素，第二个参数代表插入的位置
-
-
因为追加了两个li所以之前的width需要重新计算
-
li的宽度等于banner最外层的宽度
for(var i=0;i<lis.length;i++){ // console.log(lis[i]) lis[i].style.width=bannerWidth+"px"; } -
ul的宽度等于li的个数*li的每一个的宽度，li的宽度等于jd_banner的宽度 li.length x jd_banner的宽度
/*2.3.获取banner的宽度*/ var bannerWidth=banner.offsetWidth; // 418 /*2.4 设置图片盒子的宽度*/ imgBox.style.width=count*bannerWidth+"px"; -
因为在第一个li之前追加了最后一个li所以第一个元素变成了最后一张图片，所以要将ul定位到第二个元素也就是轮播图的第一张图片
imgBox.style.left=-bannerWidth+"px";
-
-
因为窗口发生变化宽度需要重新计算所以利用onsize事件将上面的样式在写一遍
-
轮播图自动轮播
轮播图的轮播主要依靠索引
-
最开始定义一个索引，默认等于1，因为我们要显示第二个元素，也就是第一张图片
-
我们定义一个定时器，然后再定时期内部，让索引++
-
想轮播图轮播起来，就让负的索引*bannerwidth+‘px’
-
在加上过度会更好一些
-
因为如果走到最后一个元素，需要瞬间定位到第一张图片，也就是第二个元素
if(index==count-1){ index = 1; 因为是瞬间过度，所以要清除过度 imgBox.style.transition="none"; imgBox.style.left=(-index*bannerWidth)+"px"; } -
防止当走到倒数第二张的时候，可能刚要起步向下一张轮播，瞬间被修改到第二个元素
给判断条件加一个延迟
-
-
自动轮播细节处理
移动端的touch事件
- touchstart：手指触摸到屏幕的这个元素时候会触发
- touchmove：手指在屏幕上某个元素移动的时候会触发
- touchend：手指离开的时候会触发
- touch事件对象中的属性
- touches：记录了屏幕上所有的手指
- clientX：距离视口的x坐标
- clientY：距离视口的y坐标
- pageX：距离页面内容的x坐标
- pageY：距离页面内容的y坐标
- screenX：距离窗口的x坐
- screenY：距离窗口的y坐标
- targetTouches：记录当前元素上的所有手指
- changedTouches：记录的是发生变化的手指，发生变化是指一个手指从有到无，或者从无到有
- touches：记录了屏幕上所有的手指
元素拖拽的原理
就是在touchstart的时候获取一个坐标，然后在touchmove的时候在获取一下坐标，然后用move的坐标减去start时候的坐标，最终的差值，也就是元素移动的距离
-
注册touchstart事件
startX= e.targetTouches[0].clientX; startY= e.targetTouches[0].clientY; -
注册touchmove事件
moveX= e.targetTouches[0].clientX; moveY= e.targetTouches[0].clientY; -
计算差值
distanceX=moveX-startX; distanceY=moveY-startY; -
差值就是偏移的距离
div.style.transform="translate("+distanceX+"px,"+distanceY+"px)";
轮播图滑动操作
-
给ul图片盒子注册touchstart事件（因为ul没有高度，所以要找回高度，事件才会有效，清除浮动）
/*清除定时器*/ clearInterval(timerId); /*获取当前手指的起始位置*/ startX= e.targetTouches[0].clientX; -
给ul注册touchmove事件
获取x坐标 moveX= e.targetTouches[0].clientX; 计算差值 distanceX=moveX-startX; 不能直接将差值交给ul的left 因为偏移的位置要相对与当前的这张图片的位置进行偏移 imgBox.style.left=(-index*bannerWidth + distanceX)+"px"; -
因为最开始没有过度，当轮播图轮播的时候将过度添加上，所以再次拖拽的时候也会以过度的形式，所以清除过度即可
-
松开手指的操作
-
什么时候翻页？ 只要你滑动的距离超过100，因为我们的差值可能是负值，所以我们取绝对值
if(Math.abs(distanceX)>100){ // 上一张 if(distanceX>0){ index-- }else{ index++ } 最终根据索引进行翻页 imgBox.style.transition="left 0.5s ease-in-out"; imgBox.style.left=-index*bannerWidth+"px"; } -
什时候回弹？只要滑动的距离没有超过100并且大于0
else(Math.abs(distanceX) > 0){ imgBox.style.transition="left 0.5s ease-in-out"; imgBox.style.left=-index*bannerWidth+"px"; }
-
-
利用webkitTransitionEnd来实现轮播图的无缝循环,过度结束的时候会触发
如果index=0应该将index变成count-2
如果index=count-1应该将index变成1
if(index==count-1){ index=1; /*清除过渡*/ imgBox.style.transition="none"; /*设置偏移*/ imgBox.style.left=-index*bannerWidth+"px"; } else if(index==0){ index=count-2; /*清除过渡*/ imgBox.style.transition="none"; /*设置偏移*/ imgBox.style.left=-index*bannerWidth+"px"; }
####轮播图点标记的设置
就是轮播图走到第几张也就让第几个小点高亮
也就是通过索引给对应的小点加上active类名即可
再加active之前还需要做一个排他的操作，将所有的li的active类名移除掉
var indicators=banner.querySelector("ul:last-of-type").querySelectorAll("li");
/*先清除其它li元素的active样式*/
for(var i=0;i<indicators.length;i++){
indicators[i].classList.remove("active");
}
// indicators[index]
/*为当前li元素添加active样式*/
// console.log(index)
indicators[index-1].classList.add("active");
zepto介绍和使用
-
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api**。 如果你会用jquery，那么你也会用zepto。
-
zepto和jquery对比有什么好处？
zepto主要就是针对移动端的，他是将不同的功能方法封装到不同的文件默认构建包含以下模块：
Core, Ajax, Event, Form, IE.jquery主要是针对pc端的，jq将所有的方法全部封装到一个js里面了
使用zepto实现轮播图
-
准备静态结构将你之前写的jd页面复制一份html，在讲里面的js删除掉即可
-
第一步引入zepto核心文件
-
首尾追加图片
// 将第一个元素追加到最后 var banner=$(".jd_banner"); var imgBox=banner.find("ul:first-of-type"); var last=imgBox.find("li:last-of-type"); zepto中不能直接使用eq需要引入<script src="./zepto-master/src/selector.js"></script> /*获取点标记*/ var indicators=banner.find("ul:eq(1)").find("li"); var first=imgBox.find("li:first-of-type"); imgBox.append(first.clone());将最后一个图片插入到第一个图片之前 last.clone().insertBefore(first); -
计算宽度
var lis=imgBox.find("li"); var count=lis.length; var bannerWidth=banner.width(); // 计算ul的宽度 imgBox.width(count*bannerWidth); // 计算li的宽度 lis.width(bannerWidth) // 设置ul的偏移 imgBox.css("left",-bannerWidth); -
自动轮播定时器配合索引
-
首先开启定时器
-
在定时器内部让index++
-
利用animate实现动画的轮播 如果想使用动画还需要引入fx.js
imgBox.animate({"left":-index*bannerWidth},200,"ease-in-out",function(){ // 这个函数什么时候执行？ 动画走完即触发 // 如果走到了最后一张，需要瞬间定位到第二个元素，第一张图片 // 如果走到了第一张图片，需要瞬间定位到倒数第二个元素，也就是最后一张图片 if(index==count-1){ //最后张 index=1; /*让它瞬间偏移到索引1的位置--非过渡*/ imgBox.css("left",-index*bannerWidth); } else if(index==0){ index=count-2; imgBox.css("left",-index*bannerWidth); } /*设置点标记*/ indicators.removeClass("active").eq(index-1).addClass("active"); }) imgAnimation() -
左滑就用swipeLeft （需要引入touch.js）
-
左滑因为是下一张所以在事件函数内部让index++
-
要根据索引来实现轮播动画
var imgAnimation=function(){ imgBox.animate( {"left":-index*bannerWidth}, 200, "ease-in-out", function(){ //动画执行完毕之后的回调 /*判断当前索引位置是否是最后一张或者第一张*/ console.log(1) if(index==count-1){ //最后张 index=1; /*让它瞬间偏移到索引1的位置--非过渡*/ imgBox.css("left",-index*bannerWidth); } else if(index==0){ index=count-2; imgBox.css("left",-index*bannerWidth); } /*设置点标记*/ indicators.removeClass("active").eq(index-1).addClass("active"); } ); }imgAnimation()
-
-
右滑swipeRight（需要引入touch.js）
index-- imgAnimation()
-
分类页面结构实现
结构划分,最外面的html,body，最外层的容器都要设置宽和高100%，base公共样式引入进来
-
头部（固定的高度利用定位进行脱标）
- 左中右利用padding实现
-
内容（设置高100%；利用padding-top挤下来）
-
注意点：元素一旦定位之后，宽高的百分比就相对于父容器的实际宽高来参照，如果没有设置定为，宽高百分比是参照父容器内容的宽高
-
左部分固定（宽度固定，float）
-
右面自适应（不设置宽度，加margin）
-
左侧栏滑动效果的实现
准备工作拿到ul，以及声明一些用的到全局变量
/*获取左侧栏*/
var ct_cLeft=document.querySelector(".ct_cLeft");
var ulBox=ct_cLeft.querySelector("ul:first-of-type");
var startY=0;
var moveY=0;
var distanceY=0;
/*记录当前元素滑动到的距离*/
var currentY=0;
-
给ulBox注册touchstart事件
startY= e.targetTouches[0].clientY; -
给ulBox注册touchmove事件
moveY= e.targetTouches[0].clientY; /*计算距离的差异*/ distanceY=moveY-startY; ulBox.style.transition="none"; /*实现偏移操作:应该在之前的滑动距离的基础之上再进行滑动*/ // 这样写有问题 ulBox.style.top=distanceY+"px"; 0 10 // 正确的写法 // currentY上一次记录的滑动距离 // distanceY 这一次的滑动差值 ulBox.style.top=(currentY+distanceY)+"px"; -
不能直接将滑动的差值交给top作为移动距离，应该记录上一次的移动距离+这一次的distanceY
-
应该在touchend里面记录一下上一次的拖动距离,记录的操作应该是一个累加的操作
currentY+=distanceY -
‘offsetHeight’ of null ‘offsetHeight’ of undefined
在null的身上没有offsetHeight这个方法 代表offsetHeight前面的这个东西为null 在undefined的身上没有offsetHeight这个方法 只要见到 "关键字"of null或者"关键字"of undefined 就代表关键字前面的为null或者undefined
设置滑动区间
-
静止区间
最大：0；最小：父盒子的高度-子盒子ul的高度
var leftHeight=ct_cLeft.offsetHeight; var ulBoxHeight=ulBox.offsetHeight; var maxTop=0; var minTop=leftHeight-ulBoxHeight; -
滑动区间
最大滑动：最大的静止区间+100；最小的滑动：最小的静止区间+（-100） = -100
var maxBounceTop=maxTop+100; var minBounceTop=minTop-100; -
在move的事件函数内部的设置偏移之前
if(currentY+distanceY > maxBounceTop || currentY+distanceY < minBounceTop){ console.log("超出范围啦"); return; }
松开手指要做的事情
当松开手指的时候需要回弹
-
注册touchend事件
1. currentY+distanceY大于0 也就是大于最大静止区间 回弹到0最大静止区间 同时将currentY也重新记录 if(currentY+distanceY < minTop){ currentY=minTop; /*回到minTop位置*/ ulBox.style.transition="top 0.5s"; ulBox.style.top=minTop+"px"; } else if(currentY+distanceY > maxTop){ currentY=maxTop; /*回到maxTop位置*/ ulBox.style.transition="top 0.5s"; ulBox.style.top=maxTop+"px"; } else{ /*记录当前滑动的距离*/ currentY+=distanceY; } 2. currentY+distanceY小于最小的静止区间 回弹到 最小的静止区间 将记录值记录为最小静止区间
click事件再移动端的延迟问题
click事件在移动端有大概300毫秒的延迟
假定这么一个场景。用户在 iOSSafari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOSSafari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
鉴于iPhone的成功，其他移动浏览器都复制了 iPhoneSafari 浏览器的多数约定
封装移动端的tap事件
-
只能有一根手指
if(e.targetTouches.length > 1){ //说明不止一个手指 return; } startTime=Date.now();
-
延迟要在一定的范围内：在touchstart里面获取一下当前的时间，在end里面在获取一次，然后判断这两次的时间的差值
-
不能移动，但是要包含手指抖动：在start里面获取一下坐标xy，在end时候在获取一次changedTouches
，根据差值来判断是否满足抖动还是移动
分类页面的tap事件的添加
-
引入common.js
-
给ul注册tap事件
itcast.tap(ul的dom,function(e){}) -
在事件函数的内部做什么？
-
让被点击的元素高亮
在添加active类名之前，先把所有的li的active类名移除掉 for(var i=0;i<lis.length;i++){ lis[i].classList.remove("active"); } 拿到点击的li添加active类名 e.target 拿到 的是点击的这个a // 这样拿到的就是点击的这个li var li=e.target.parentNode; // 给这个li添加active类名 li.classList.add("active"); -
让点击的这个元素定位到最顶部
拿到li的索引*li的高度
li的高度：var liHeight=li.offsetHeight;
li的索引的设置
for(var i=0;i<lis.length;i++){ lis[i].index=i; }ul最终偏移的距离
ulBox.style.top=-index*liHeight+“px”;
if(-index*liHeight < minTop){ /*只能偏移到minTop位置*/ ulBox.style.top=minTop+"px"; // 记录上一次的最终的位置 currentY=minTop; } else{ ulBox.style.top=-index*liHeight+"px"; currentY=-index*liHeight; }#### zepto中使用tap事件
-
-
引入zeptojs
-
注册tap事件
$(ulbox).on('tap',function(){})
移动端点透问题
点透问题其实当两个元素叠加在一起，上面的注册touchstart事件，下面的注册点击事件，当点击上面的时候，让其上面的元素隐藏，但是也间接的触发了下面的点击事件，这就是点透问题
zepto努力的解决这个问题，但是没有解决的很完美
使用fastclick解决这个问题
-
第一步引入fastclick
<script type='application/javascript' src='/path/to/fastclick.js'></script> -
如果使用js则这样初始化
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } -
如果使用jquery or zepto
// 如果有入口函数直接FastClick.attach(document.body);放在入口函数里不要再次创建 $(function() { FastClick.attach(document.body); }); -
如何注册事件
dom.addEventListener("click",function(){ tap.style.visibility="hidden"; }) -
没有点透问题
-
没有延迟
-
既能在移动端响应还能在pc响应
iscroll使用
-
写结构,类似下面的结构
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> -
引入scroll
<script src="./js/iscroll.js"></script> -
js初始化
var myScroll = new IScroll('.wrapper2',{ mouseWheel: true, scrollbars: true });
swiper使用步骤
-
写结构 类名是必须一样的
-
引入swiper的样式和js
<link rel="stylesheet" href="./dist/css/swiper.min.css"> <script src="./dist/js/swiper.min.js"></script> -
js初始化
new Swiper ('.swiper-container') -
属性
- autoplay：值毫秒数，既能设置自动轮播，也能设置轮播的时间
- loop: 值布尔值，是否循环
- pagination: ‘.swiper-pagination’ 设置分页器
- autoplayDisableOnInteraction:false，用户操作完后是否禁止自动轮播
- nextButton: ‘.swiper-button-next’：下一页
- prevButton: ‘.swiper-button-prev’：上一页
- scrollbar: ‘.swiper-scrollbar’：滚动条
网页布局方式
1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
5、flex布局
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。
响应式布局
就是通过一套代码来实现不同屏幕分辨率的终端上浏览网页的不同展示方式
a) 在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读
b) 之前，通常的做法是对移动端单独开发一套特定的版本
c) 但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配
d) 响应式开发的目的就是:一个网站能够兼容多种终端
e) 在新建的网站上一般都会使用响应式开发
f) 移动web开发和响应式开发是必须具备的技能
g) 演示响应者页面
响应式开发的原理就是媒体查询
媒体查询
媒体查询能够判断不同的屏幕设置不同的css样式
小于768 超小屏幕 （手机端）
768-992 小屏幕 （平板）
992-1200 中等屏幕 （pc端的中等屏幕）
1200以上 超大屏 （pc中的大屏）
在写媒体查询的时候 and前后必须要有空格，如果有两个条件，也用and链接
@media screen and (max-width: 768px){
body{
background-color: green;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
body{
background-color: blue;
}
}
- min-width：判断最小宽，也就是要大于这个条件
- max-width：判断最大宽，也就是要小于这个条件
媒体查询书写规则
如果判断的min-width，从小到大去写
向上兼容：如果该条件为最后一个条件，那么他会无止境的把大于当前条件的屏幕全都有效
向下覆盖：后面条件的样式，会覆盖前面条件的样式
如果判断的max-width，从大到下去写
device-width：是用来判断设备的宽度，在模拟器上改变屏幕的大小是没有没问题的，但是在pc端就会有问题
link标签也可以设置媒体查询，如果符合条件，该样式就引入成功
<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="b.css">
not：将条件取反
响应式框架介绍
- bootstrap
- Amaze ~ 妹子UI，国人开发，后起之秀！
bootstrap基本使用
-
找到起步里面的基本模板
-
第二步修改基本模板里面的路劲
<!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> 这个条件注释代表只在ie9或以下才将里面引入的js真正引入，如果不符合条件，他就是一段真正的注释
rem布局
利用rem布局，根据设计图进行等比例缩放，以此来适配不同的视口大小，
rem就是根据html的font-size的大小设置大小
一般设计图是640或者750就可以分为6.4份或者7.5份 -- 没份100px， --- 也就是说1rem = 100px，为了便于自动获取和适配我们利用已经封装好的函数flexible.js 进行自动的计算
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
