移动端学习小结

1.视口

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

(WebStorm快捷输入: meta:vp tab键)
viewport 即视口,声明语句通常紧挨着编码语句。
常用参数:

width=device-width 使视口宽度为设备宽度
initial-scale=1.0 初始放大比例
user-scalable=no 是否允许用户缩放 “yes or no”或者“1 or 0”
maximum-scale 可以设置最大缩放比例
minimum-scale 可以设置最小缩放比例

2.屏幕尺寸定义

  1. 768px以下为超小屏(手机屏),在bootstrap中定义为 xs。
  2. 768px-992px 之间为小屏(平板电脑),在bootstrap中定义为sm。
  3. 992px-1200px 之间为中屏(一些电脑),在bootstrap中定义为md。
  4. 1200px以上为大屏(大多数电脑),在bootstrap中定义为lg。

3.适配方案

  1. 网页宽度必须和浏览器宽度保持一致
  2. 默认显示的缩放比例与PC端保持(缩放比例1.0)
  3. 不允许用户自行缩放网页

满足这些要求就到达国际通用适配方案。
这是移动端标准适配方案。

非主流适配方案:

  1. 页面的真实尺寸会比在设备上的尺寸要大几倍。
  2. 假设设备是iPhone4 尺寸为320px ,则网页尺寸为640px。
  3. 缩放操作,有两倍,三倍 和屏幕的像素比有关系。
  4. 在屏幕像素比(一个px宽的屏幕能放几个物理像素)高的设备 图片(非矢量图)会显示模糊。
  5. 提高网页的清晰度 根据屏幕像素比来缩放网页。
  6. 但是这样的适配方案成本非常高。
  7. 一般企业开发当中使用的还是标准化适配。但在高清显示屏中,图片可能会失真(变模糊)

4. 移动端不建议使用JQuery

  1. 可以使用JQuery,但是不建议
  2. JQuery 做了很多桌面浏览器的兼容问题 特别是IE,但是移动端没有IE
  3. 主流浏览器:谷歌 火狐(2016年停止维护和更新) Safari 百度 360 QQ
  4. 特点:内核基本上都是 webkit 或者blink 兼容-webkit
  5. 使用H5的api 或者使用一个 叫做 : Zepto.js 的库 (基于高版本浏览器开发)

5. box-sizing

在移动端通常使用box-sizing: border-box;样式从边框开始计算宽度。

6. tap-highlight-color

在移动端轻击屏幕时会有一个颜色块,可以使用-webkit-tap-highlight-color: transparent; /*透明*/修改样式看不到颜色块。

7.图片下间隙问题

图片在默认情况下会与下边框线产生间隙。
移动端学习小结_第1张图片
解决方法参考:图片下间隙问题解决方法

8. 移动端常用touch触摸事件

touch事件组

  1. touchstart 手指触发屏幕触发
  2. touchmove 手指在屏幕中滑动
  3. touchend 手指离开屏幕触发
  4. touchcancel 当被迫终止滑动的时候触发 (来电 弹消息)

常用属性

touches 页面所有触摸点集合
获取坐标:
clientX clientY 基于浏览器窗口(视口)
pageX pageY 基于页面(视口)
screenX screenY 基于屏幕

  dom.addEventListener("touchstart",function (e) {
                startX=e.touches[0].clientX;   //e.touches[0]第一个触摸点
            });

9. 移动端的click事件

在移动端使用click事件时有300ms的延迟(为了区分是点击还是滑动),因而影响用户体验。
解决方法:
(1)使用tab事件 (不是移动端原生事件,通过touch相关事件衍生而来)
(2)使用fastclick.js 插件提高移动端click响应速度。

10. 两个实用布局

  1. 双飞翼布局,常用于移动端顶部导航栏。
    双飞翼布局
    移动端学习小结_第2张图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        *{
            box-sizing: border-box;  /*从边框开始算宽度 重要*/
        }
        .container{
            width: 100%;
            height: 40px;
            background-color: pink;
            position: fixed;
        }
        .container .search_box{
            width: 100%;
            height: 40px;
            background-color: yellow;
            min-width: 320px;
            max-width: 640px;   /*限定宽度*/
            position: relative;
            margin: auto;
        }
        .search_box form{
            width: 100%;
            padding-left:50px;
            padding-right: 70px;
            padding-top: 5px;
        }
        .search_box form input{
            width: 100%;
            height: 30px;
            padding: 0 10px;
            border: none;
            border-radius: 30px;
            outline: none;
        }
        .search_box .logo{
            position: absolute;
            left: 0;
            width: 50px;
            height: 40px;
            background-color: red;
            top: 0;
        }
        .search_box .login{
            position: absolute;
            right: 0;
            width: 60px;
            height: 40px;
            background-color: #d8505c;
            top: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="search_box">
    <a href="#" class="logo"></a>
    <form>
        <input type="search">
    </form>
    <a href="#" class="login"></a>
    </div>
</div>
</body>
</html>
  1. 两栏自适应布局,常用于分类页面。
    移动端学习小结_第3张图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏自适应</title>
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box2{
            /*让这个元素绝对绝缘*/
            /*不让其他浮动元素影响自己*/
            /*不让自己的浮动去影响别的元素*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--小技巧-->
<!--1. 文本环绕-->
<div class="box1">
</div>
<div class="box2">内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

11.区域滚动效果

使用插件 iscroll.js 下载地址:iscroll.js
使用方法:

  1. 主页面引入js文件
    移动端学习小结_第4张图片
  2. 主页面js配置
window.onload=function () {
	//左边区域容器
    document.querySelector('.jd_cateLeft').addEventListener('touchmove',function(e){
    
        e.preventDefault();

    });
    //右边区域容器
    document.querySelector('.jd_cateRight').addEventListener('touchmove',function(e){

        e.preventDefault();

    });
    /*区域滚动效果*/
    /*使用插件*/
    /*条件: 一个容器装着一个容器的结构*/
    /*找到大容器*/
    /*子容器大于父容器*/
    new IScroll(document.querySelector(".jd_cateLeft"),{
        scrollx:false,  /*x轴不滚动*/
        scrolly:true    /*y轴滚动*/
    });

    new IScroll(document.querySelector(".jd_cateRight"),{
        scrollx:false,  /*x轴不滚动*/
        scrolly:true    /*y轴滚动*/
    });
}

效果:

12.媒体查询

使用媒体查询能针对不同屏幕区间设置不同的布局和样式
下面以中等屏幕为例:

 @media screen and (min-width: 992px) and (max-width: 1200px){
 			/*样式*/
            .container{
                width: 970px;
                background-color: #a3ebff;
            }
        }

13. normallize.css和reset.css的区别

共同点: 都是用来重置样式库,增强浏览器的表现一致性。
不同点: reset.css 会破坏原本就保持一致的样式,而 normallize不会重置已经已经一致的元素。比如:ul中的list-style样式,这就是原本保持一致的样式,li都会带一个小黑点,而我们一般不需要这个黑点。

你可能感兴趣的:(前端)