移动web开发基础

最新推荐文章于 2024-07-18 18:43:34 发布

WGP鹏灬

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量133

点赞数

分类专栏：前端开发学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_43477251/article/details/120539698

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、经验

一、基础

1、移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

2、概况

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

二、视口

1、概念

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

2、布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

3、视觉视口 visual viewport

它是用户正在看到的网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

4、理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写<meta>视口标签通知浏览器操作
<meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

（1）`<meta>`视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum=1.0, minimum=1.0">

属性	解释说明
width	宽度设置的是viewport的宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

（2）标准的viewport参数设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

三、二倍图

1、物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750* 1334
我们开发时候的1px不是一定等干1个物理像素的
PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素的
Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里从而达到更高的分辨率，并提高屏幕显示的细腻程度

启动图尺寸（物理）	机型	倍数	开发尺寸
320x480	iPhone 3GS	@1x	320x480
640*960	iPhone4s	Default@2x	320x480
640x1266	iPhone5s	Default-568h@2x	320x568
750x1334	iPhone6.7.8	Default-667h@2x	375x667
1242x2208	iPhonePlus (6+/ 7+/8+ )	Default- 736h@3x	414x736
1125x2436	iPhoneX、XS	Default-812h@3x	375x812
828x1792	iPhoneXR	Default-828h@2x	414x896
1242x2688	iPhoneX Max	Default-1242h@3x	414x896

2、多倍图

对于一张50px*50px的图片在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
因为iPhone 6\78的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
背景图片注意缩放问题

问题：如果一个 50 * 50 px的图片放到手机屏幕中，占有的物理像素点是 100 * 100 个，会造成图片模糊
解决问题：使用一个本身就是 100 * 100 px 的图片去进行制作，替换原来图片，然后设置图片尺寸为 50 * 50 px，图片更清晰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
        .box {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            /* 背景图也需要使用高倍图进行添加 */
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>
<body>
    <img src="images/apple50.jpg" alt="">
    <img src="images/apple100.jpg" alt="">
    <div class="box"></div>
</body>
</html>

3、多倍图切图

@3X 3倍图
@2X 2倍图
@1X 1倍图原图

注：在工作中，我们切图的时候不要直接从开发设计图切图，要从启动图（原始）切图，因为开发图是后期人工缩小的

四、移动端开发常见选择方案

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

通常情况下，网址域名前面加m（mobile）可以打开移动端，通过判断设备，如果是移动端，会自动跳转到移动端，不需要考虑移动端兼容问题。

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

PC端和移动端共用一套代码，只不过在不同的宽度下，样式会自动适配，缺点是制作较麻烦，需要花很多精力去调试兼容性问题。

三星手机官网

五、移动端技术解决方案

1、浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit 兼容性问题
放心使用H5 标签和 CSS3样式
我们浏览器的私有前缀只需要考虑添加-webkit-即可

2、CSS初始化 normalize.css

移动端CSS初始化推荐使用normalize.css，让不同的浏览器在渲染网页元素的时候形式更统一
优点：

保护了有价值的默认值
修复了浏览器的bug ，解决了浏览器的不一致的默认样式
模块化的
详细的文档

3、CSS3盒子模型 box-sizing

传统模式宽度计算：盒子的宽度= CSS中设置的width + border + padding
CSS3盒子模型计算：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding，也就是说，我们的CSS3中的盒子模型，padding 和border不会撑大盒子了
移动端可以全部使用CSS3盒子
PC端如果需要完全兼容，建议使用传统盒模型（content-box），如果不考虑兼容性，可以选择全部是用CSS3盒模型（border-box）

特殊样式：

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*（通配符）点击高亮我们需要清除清除设置为transparent完成透明 */
*{
-webkit tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观IOS上加上这个属性才能给按钮和输入框自定义样式（只需要给input标签即可） */
input {
  -webkit appearance: none;
}

/* 禁用长按页面时的弹出菜单 */
img,a { 
  -webkit-touch-callout: none;
}

对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
        /* 传统盒模型：边框、内边距会在宽高之外进行扩展 */
        .box1 {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid #f00;
            box-sizing: content-box;
            background-color: pink;
        }
        /* css3盒模型：元素占有的整体宽高不变，添加内边距和边框后，自动内减 */
        .box2 {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid #f00;
            box-sizing: border-box;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

3、移动端常见布局方式

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

流式布局(百分比布局)
flex弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局

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

媒体查询（判断设备宽度）
bootstrap（框架）

WGP鹏灬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动web开发基础

笔记来源：拉勾教育 - 大前端就业集训营文章内容：学习过程中的笔记、感悟、经验一、基础1、移动端调试方法Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问2、概况移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试二、视口1、概念就是浏览器显示页面
复制链接

扫一扫