麦泽航第一次学习笔记（第二周）

编写前准备：

1. 流式布局：使用百分比而不是固定像素来确定布局，如width：100%

2. viewport视觉窗口只存在于移动端，是一个虚拟的容器，介于浏览器和内容之间。它的默认宽度为980px，具有缩放、设置尺寸、是否自行缩放

适配要求：

3. 网页宽度（width）=viewport宽度=浏览器（设备）宽度

4. 视口缩放比1.0且不允许自行缩放（禁止缩放）

5. 在head部分可用<meta name=”viewport”/>来声明，但是移动端自带viewport

6. content=width=device-width

initial-scale=1.0

user-scalable=0(0代表否，1代表是)

当该值为0时不用设置最大最小缩放比

7. 快捷方式 meta:vp+tab键

8. 高清屏中会用多个物理像素来表达1px的图，此时图片被放大导致失真

搭建骨架

内包含重置样式reset.css和公用样式common.css

1. head部分用<meta name=”viewport” content=……/>来声明viewport
2. 用<link rel="stylesheet" href=" .css">来声明css
3. 在body部分用<script src=" .js">来声明js
4. box-sizing: border-box;从边框开始计算
5. -webkit-box-sizing: border-box;使其能兼容大部分浏览器
6. -webkit-tap-highlight-color:用于设置点击的高亮效果，默认效果是灰色，若设置值为transparent则可清除高亮效果
7. 移动端常用字体：sans-serif
8. 在textarea，input中resize:none可以禁止调整大小
9. 除以上之外移动端还有一些特殊的输入框样式，可通过-webkit-appearance:none清除

版心容器

1. width:100%设置自适应，然后用max-width和min-width来设置自适应的最大最小值
2. 最大最小值由psd设计稿决定，常用最大值640/750px，最小值320px

顶部搜索框
可以在整体版心容器里，对搜索框再设置一个版心容器
设置了position:fixed后margin:0 auto不起作用
左右两侧的logo和登录框用position:absolute，然后用top:0,left/right:0来放到左右两侧
中间的搜索框（版心容器）设置position:relative，然后用padding-left/right来空出两旁logo和登录框的位置
设置z-index:取大值，使得其不被覆盖

图标失真问题
二倍图方法，用background-size设置为原图尺寸的0.5倍
可用[class^=“icon_”]/[class*=" icon_"]等来将上面的条件运用到所有的icon_中

轮播图
例如轮播图有6张，则设置8个li，顺序为6-1-2…5-6-1
底下灰点设置6个li

1. 由于所有轮播图在同一行，则整体banner为width:100%，轮播图的ul则为width:100%*8,li设为width:100%÷8，li中a设为100%
2. 因为轮播图的首图是1图，排在第二位，因此在ul设置transform:translateX(-12.5%)，-webkit-transform:translateX(-12.5%)，在li设置float:left
3. 为了防止将搜索框覆盖，banner应设position:relative和overflow:hidden
4. 设置底下灰点居中：在ul中position:absolute，left:50%，设置宽度width为一定数值x后，设置margin-left:-0.5x

导航栏
一行4个，则ul设置width:100%时，li设置25%

注意流式布局的运用和图片失真问题，其余部分和pc端开发大致相同。

改变背景透明度
将十六进制颜色值改成rgba，即在rgb(x,y,z)后加上透明度a，变成rgba(x,y,z,a)

监听页面滚动

1. 获取dom元素：var search = document.querySelector('class名');
2. var banner = document.querySelector('class名');
3. 获取距离范围：var height = banner.offsetHeight;
4. 监听滚动：先获取离顶部的距离，然后用if else语句让颜色随滚动加深，距离超过轮播图时颜色不变
   window.onscroll = function(){
   var top = document.body.scrollTop;
   var opacity = 0;
   if( top < h){
   opacity = top/h * 0.85
   }else{
   opacity = 0.85
   }

touch事件
是移动端特有的事件

1. touchstart：手指刚触摸到屏幕触发
2. touchmove：手指滑动时不停地触发
3. touchend：手指离开屏幕时触发
4. touchcancel：*中止滑动时触发

var dom = document.querySelector(‘class名’);
使用这些事件时不能用on（如dom.ontouchStart）因为第二次会产生覆盖，此时应用dom.addEventListener(‘touchstart’,function(){
console.log(‘touchstart’);});便可监听触发次数，同理可延申到touchmove等

本文地址：https://blog.csdn.net/YokiExpert/article/details/107526036