前端学习笔记 - 移动端Web开发

最新推荐文章于 2024-07-22 14:52:02 发布
最新推荐文章于 2024-07-22 14:52:02 发布
阅读量1k 收藏 5
点赞数
分类专栏： 前端学习笔记 文章标签： html css javascript css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengxm0309/article/details/120836123
版权
本文详细介绍了移动端Web开发的基础知识，包括浏览器现状、手机屏幕尺寸、常见移动端屏幕尺寸和调试方法。深入讲解了视口、meta视口标签、二倍图、背景缩放、流式布局和flex弹性布局。此外，还探讨了移动端开发选择，如单独移动端页面和响应式布局，以及介绍了移动端技术解决方案，如normalize.css、CSS3盒子模型、媒体查询、Less和rem布局。文章还涵盖了Bootstrap前端框架、vw/vh移动端布局、移动端网页特效如触屏事件、轮播图和拖动元素，并讨论了移动端开发中常用的插件和框架。
摘要由CSDN通过智能技术生成

移动端基础

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

  • 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样

  • 兼容移动端主流浏览器，处理Webkit内核浏览器即可

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。

  • Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

  • 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

  • 作为开发者无需关注这些分辨率，因为常用的尺寸单位是px

常见移动端屏幕尺寸

设备 尺寸(英寸) 开发尺寸(px) 物理像素比
iphone3G 3.5 320*480 1.0
iphone4/4s 3.5 320*480 2.0
iphone5/5s/5c 4.0 320*568 2.0
HTC One M8 4.5 360*640 3.0
iphone 6 4.7 375*667 2.0
Nexus 4 4.7 384*640 2.0
Nexus 5x 5.2 411*731 2.3
iphone6 Plus 5.5 414*736 3.0
Samsung Galaxy Note4 5.7 480*853 3.0
Sony Xperia Z Ultra 6.4 540*960 2.0
Nexus 7('12) 7.0 600*960 1.3
iPad Mini 7.9 768*1024 1.0

作为前端开发，不建议纠结dp，dpi，pt，ppi等单位。

移动端调试方法

  • Chrome DevTools（谷歌浏览器）的模拟手机调试

    • f12→左上角小图标→可以选择型号，也可以edit添加

    • image-20211014172322974

    • image-20211014172447703

    • image-20211014172555608

  • 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

  • 使用外网服务器，直接IP或域名访问

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

  • 布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题

    • iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手动缩放网页

image-20211014172938463

image-20211014173322294

  • 视觉视口 visual viewport：是用户正在看到的网站的区域

    • 可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

image-20211014173026820

  • 理想视口 ideal viewport

    • 使网站在移动端有最理想的浏览和阅读宽度而设定

    • 理想视口，对设备来讲，是最理想的视口尺寸

    • 需要手动添写meta视口标签通知浏览器操作

      meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性 解释说明
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字(页面一打开按照几倍打开)
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

标准的viewport设置

  • 视口宽度和设备保持一致 width=device-width

  • 视口的默认缩放比例1.0 initial-scale=1.0

  • 不允许用户自行缩放 user-scalable=no

  • 最大允许的缩放比例1.0 maximum-scale=1.0

  • 最小允许的缩放比例1.0 minimum-scale=1.0

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。

  • 厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334

  • 开发时候的1px 不是一定等于1个物理像素的

  • PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同

  • PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的

  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

    • iphone8的物理像素是750，1px开发像素等于2个物理像素(375宽的盒子就可以占满了)

  • Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从 而达到更高的分辨率，并提高屏幕显示的细腻程度

image-20211014175133308

多倍图

  • 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

  • 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

  • 通常使用二倍图， 因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

  • 背景图片 注意缩放问题

        /* 在 iphone8 下面，需要一个50*50px的图片，直接放进去会被放大两倍，100*100就会模糊，所以要放一个100*100像素的图片，然后手动把这个图片的大小缩小为50*50px */
        /* 准备的图片比实际需要的大小大两倍，就是2倍图 */
        img {
            /*原始图片100*100px*/
            width: 50px;
            height: 50px;
        }
        /*或*/
        .box {
            /*原始图片100*100px*/
            background-size: 50px 50px;
        }

背景缩放 background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

  • 单位： 长度|百分比|cover|contain;

  • cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

  • contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

  • 只写一个参数，算作宽度，高度会等比例缩放

移动端开发选择

  • 移动端主流方案

    • 单独制作移动端页面（主流）

      • 京东商城手机版、淘宝触屏版、苏宁易购手机版等

    • 响应式页面兼容移动端（其次）

      • 三星手机官网等

单独移动端页面（主流）

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面

image-20211014192235745

响应式兼容PC移动端

三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。

  • 缺点：制作麻烦， 需要花很大精力去调兼容性问题

移动端技术解决方案

移动端浏览器

  • 移动端浏览器基本以 webkit 内核为主，因此就考虑webkit兼容性问题。

  • 可以放心使用 H5 标签和 CSS3 样式。

  • 同时浏览器的私有前缀只需要考虑添加 webkit 即可

image-20211014192510648

CSS初始化 normalize.css

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
​
​
/* Document
   ========================================================================== */
​
​
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
​
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}
​
​
/* Sections
   ========================================================================== */
​
​
/**
 * Remove the margin in all browsers.
 */
​
body {
    margin: 0;
}
​
​
/**
 * Render the `main` element consistently in IE.
 */
​
main {
    display: block;
}
​
​
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
​
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
​
​
/* Grouping content
   ========================================================================== */
​
​
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
​
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}
​
​
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
​
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}
​
​
/* Text-level semantics
   ========================================================================== */
​
​
/**
 * Remove the gray background on active links in IE 10.
 */
​
a {
    background-color: transparent;
}
​
​
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
​
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}
​
​
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
​
b,
strong {
    font-weight: bolder;
}
​
​
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
​
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}
​
​
/**
 * Add the correct font size in all browsers.
 */
​
small {
    font-size: 80%;
}
​
​
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
​
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
​
sub {
    bottom: -0.25em;
}
​
sup {
    top: -0.5em;
}
​
​
/* Embedded content
   ========================================================================== */
​
​
/**
 * Remove the border on images inside links in IE 10.
 */
​
img {
    border-style: none;
}
​
​
/* Forms
   ========================================================================== */
​
​
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
​
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}
​
​
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
​
button,
input {
    /* 1 */
    overflow: visible;
}
​
​
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
​
button,
select {
    /* 1 */
    text-transform: none;
}
​
​
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
​
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
​
​
/**
 * Remove the inner border and padding in Firefox.
 */
​
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
​
​
/**
 * Restore the focus styles unset by the previous rule.
 */
​
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
​
​
/**
 * Correct the padding in Firefox.
 */
​
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
​
​
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
​
legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}
​
​
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
​
progress {
    vertical-align: baseline;
}
​
​
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
​
textarea {
    overflow: auto;
}
​
​
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
​
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}
​
​
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
​
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
​
​
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
​
[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}
​
​
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
​
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
​
​
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
​
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}
​
​
/* Interactive
   ========================================================================== */
​
​
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
​
details {
    display: block;
}
​
​
/*
 * Add the correct display in all browsers.
 */
​
summary {
    display: list-item;
}
​
​
/* Misc
   ========================================================================== */
​
​
/**
 * Add the correct display in IE 10+.
 */
​
template {
    display: none;
}
​
​
/**
 * Add the correct display in IE 10.
 */
​
[hidden] {
    display: none;
}

CSS3 盒子模型 box-sizing

CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding，也就是说，CSS3中的盒子模型， padding 和 border 不会撑大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

  • 移动端可以全部CSS3 盒子模型

  • PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

特殊样式

    <style>
        div {
            /*CSS3盒子模型*/
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        
        img,
        a {
            /*需要清除点击高亮,设置为transparent透明*/
            -webkit-tap-highlight-color: transparent;
            /*禁用长按页面时的弹出菜单*/
            -webkit-touch-callout: none;
        }
        
        input {
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            -webkit-appearance: none;
        }
    </style>
</head>
​
<body>
    <div></div>
    <a href="#">链接</a>
    <input type="button" value="按钮">
</body>

移动端常见布局

移动端技术选型

  • 单独制作移动端页面（主流）

    • 流式布局（百分比布局）

    • flex 弹性布局（强烈推荐）

    • less+rem+媒体查询布局

    • 混合布局

  • 响应式页面兼容移动端（其次）

    • 媒体查询

    • bootstrap

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

  • 主要是看宽度，不看高度

  • 流式布局方式是移动web开发使用的比较常见的布局方式

  • max-width 最大宽度 （max-height 最大高度）

  • min-width 最小宽度 （min-height 最小高度）

京东移动端首页

  • 访问地址：m.jd.com

  1. 技术选型

  • 方案：单独制作移动页面方案

  • 技术：采取流式布局

  1. 搭建相关文件夹结构

image-20211014195706893

  1. 设置视口标签以及引入初始化样式

最低0.47元/天 解锁文章
茗0309
关注
专栏目录
（一）移动端前端开发-移动端基础
m0_56517198的博客
02-12 1929
移动web、运行在移动设备上的产品。适配平台：安卓、IOS；H5运行环境分类：移动端浏览器 - 原生APP的webview中（hyBrid模式）- 开发的H5页面镶嵌入到app的webview中显示。移动端屏幕PPI；代表屏幕每英寸的像素数量，即**像素密度**。高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）。DPR设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和CSS像素的比值。
移动端web开发
lzh17538073353的博客
08-10 2825
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。 移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。 【H5页面、微网页、微站、wap站、webAPP】 如:京东商城手机版，淘宝触屏版，苏宁易购手机版 ...
浅谈前端开发者应该了解的移动端技术
最新发布
2401_83384536的博客
07-22 860
之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。在现在的公司也做了一些零散的 H5 页面，有一些相关实践。反而因为基础设施和体系不完善，接触到了更多东西。刚好最近团队和客户端一起从零搭建 React Native 的体系，于是恶补了一些相关的知识，顺便把 H5 开发中的一些东西也温习记录了一遍。不算是新技术介绍，只是整理的一些总结。说起移动端开发，就绕不开 Hybrid 技术。
浅谈前端移动端页面开发（布局篇）
03-29 209
http://www.xiaoxiangzi.com/Programme/CSS/4298.html 前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档 去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 内容有些长，这...
前端基础知识第四章---移动端WEB开发之响应式布局
m0_60567881的博客
04-07 625
1️⃣ 栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。2️⃣Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，响应式栅格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
前端学习笔记之移动端 3.23
qq_36450483的博客
03-24 455
前端学习笔记之移动端
前端基础知识第四章---移动端WEB开发之响应式布局，面试必问的几个问题
m0_60635001的博客
04-16 453
Bootstrap来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。❗️ ❗️❗️ ❗️框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
web移动端开发
廿四桥明月夜的博客
12-29 606
todo
移动端--web开发
renpinghao的专栏
07-16 6083
最近看到群里对关于 移动端 web开发很是感兴趣，决定写一个关于 移动端的web开发 概念或框架（宝庆对此很是纠结）。也是因为自己一直从事pc 浏览器 web一直对 移动端的不是很重视，所以趁此机会也让自己对 移动端的开发 有个清晰的认识。 环境： 1. 移动端的内核：手机浏览器的内核是什么    在文章中 Android 手机 采用 Webk
移动端web开发（一）
ANNENBERG的博客
05-24 505
适配问题（手机屏幕尺寸不一） 解决方案 ...
前端移动端web开发（一）
whisper49的博客
09-14 8205
一、前端开发 1.前端开发分类： PC端开发：页面主要运行在PC端浏览器中 移动端开发：页面主要运行在手机上 移动web开发 在移动端表现良好的页面，如新浪网 混合式开发（Hybrid App） 也叫“套壳开发”，通过写特定的代码生成跨平台的web app，可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。 移动端web app开发 web app比较接近客户端应用程序的用户体验，可以和系统深度融合，调用一些只有客户端才能调用的功能，如在移动设备上利用
移动前端开发
晴宇
03-16 2255
移动前端的开发笔记
移动web页面前端开发总结
weixin_30672295的博客
06-10 173
工作笔记：移动web页面前端开发总结 移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，...
移动端前端
weixin_51877011的博客
04-01 2676
前端小白学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

茗0309

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值