web移动端-1

经典布局

适配问题

移动端主要问题

适配问题，即不同终端，屏幕尺寸不一样

相比于pc端，pc端主要是关注兼容性问题，而移动端是适配问题。

解决方法

一般在pc端的web 放在移动端，viewport会自动缩放，不会出现滚动条原长宽显示

【pc端的宽度一般默认是980px 的原因：即默认最小的pc端的宽度是980px，如果本来是1300，然后碰到1000px的屏幕，就会出现滚动条】

1.非主流方案：

第9、10原因：假设一个像素10kb质量就好，在2:1比例的屏幕像素比中，需要准备一个20kb的照片，然后分到每个像素就是10kb，这样，不同比例，就要准备不同质量的照片

2.主流方案要求：满足以下则可达到了适配 — 标准的移动端适配方案

• 为了不出现滚动条：网页宽度必须和浏览器保持一致
• 为了防止出现下图情况，默认显示的缩放比例和pc端保持一致（缩放比例1.0）
  
• 不允许用户自行缩放网页

方案：流动布局+viewport

• 流动布局
  
• viewport 视口
• viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
浏览器承载viewport再承载网页

放到移动端视，viewport会自动把页面整体缩放，也包括把图片缩放。

• 方案：
  
  
  meta:vp 快捷键

结果适配：

web移动端的特点

不建议使用jquery 而使用zepto.js（基于高版本的浏览器库）

jquery 在移动端太冗余了

重置css：

• margin padding 清0
• 元素均设置为border-box
• a链接高亮清0，下面的属性是移动端 特有的
  

整个reset.css代码入下：

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/                /*这是移动端特有的样式属性*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;     
    /*点击高亮效果的清除*/                       /*这是移动端特有的样式属性*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;        /*如果没有微软雅黑，就默认用浏览器自己的*/
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;    /*text-decoration 属性规定添加到文本的修饰。例如下划线等*/
    color: #333;
}
input,textarea{
    border: none;
    outline: none; 
    /*不允许改变尺寸  针对textarea框右下角有一个可以改变尺寸的x点*/
    resize: none;   
    /*元素的外观  none没有任何样式    可选项例如button，即用button的外观*/
    -webkit-appearance: none;                /*这是移动端特有的样式属性*/
}

移动端的内核大部分都是谷歌！所以兼容性只需要考虑谷歌！

移动端事件

touch

• touchstart
• touchmove
• touchend
• touchcancel
  

举例 轮播图

需求及方法分析：