移动端学习小结

最新推荐文章于 2021-08-04 14:23:56 发布

酸霉汤

最新推荐文章于 2021-08-04 14:23:56 发布

阅读量373

点赞数

分类专栏：前端文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/iTaylorfan/article/details/107312388

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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.屏幕尺寸定义

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

3.适配方案

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

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

非主流适配方案：

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

4. 移动端不建议使用JQuery

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

5. box-sizing

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

6. tap-highlight-color

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

7.图片下间隙问题

图片在默认情况下会与下边框线产生间隙。

解决方法参考：图片下间隙问题解决方法

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

touch事件组

touchstart 手指触发屏幕触发
touchmove 手指在屏幕中滑动
touchend 手指离开屏幕触发
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. 两个实用布局

双飞翼布局，常用于移动端顶部导航栏。

<!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>

两栏自适应布局，常用于分类页面。

<!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
使用方法：

主页面引入js文件
主页面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都会带一个小黑点，而我们一般不需要这个黑点。

酸霉汤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端学习小结

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-sca
复制链接

扫一扫