重温前端基础（二） 移动WEB开发

目录

• 1. 移动端基础
• 2. 视口
• 3. 二倍图
• 4. 移动开发选择和技术解决方案
• 5. 移动端常见布局
• ~~未完待续

---

1. 移动端基础

PC端及手机端浏览器众多，开发中，兼容移动端主流浏览器，处理Webkit内核浏览器即可。

移动端调试方法：

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

2. 视口

视口（viewport）：浏览器显示页面内容的屏幕区域。

视口可分为 布局视口、视觉视口 和 理想视口。

2.1 meta标签

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

1. 属性表：

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

2. 最标准的 viewport 设置

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

3. 二倍图

3.1 物理像素 & 物理像素比

       物理像素点：屏幕显示的最小颗粒，是物理真实存在的。在出厂时就已设置好，比如苹果 6 是 750 × 1334。

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

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

       如果把 1 张100×100的图片放到手机里，会按照物理像素比给我们缩放，而对于 1 张 50px × 50px 的图片，在手机或 Retina 屏中打开，按照刚才的物理像素比会放大，这样会造成图片模糊。

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

       通常使用 二倍图， 因为iPhone 6 的影响背景图片，注意缩放问题。

????注： 开发时的1px 不一定等于 1 个物理像素！

3.2 背景缩放 background-size

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

1. 语法：

   background-size: length|percentage|cover|contain;;
   

   值	描述
   length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度； 如果只设置一个值，则第二个值会被设置为auto。
   percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度； 如果只设置一个值，则第二个值会被设置为 auto。
   cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域； 背景图像的某些部分可能无法显示在背景定位区域中。
   contain	把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

2. 示例：

   	/* 1. 背景图片盒子尺寸 50 * 50，准备2倍图（100*100） */
       /* 2. 需要把这个图片缩放一半，也就是 50*50 background-size*/
   div {
           width: 50px;
           height: 50px;
           border: 1px solid red;
           background: url(images/apple100.jpg) no-repeat;
           background-size: 50px 50px;
       }
   

3. 原理
   如把一张50×50像素（css像素）的图片，直接放到 iphone8 里面，会被放大 2 倍（即100×100），这样图片显示会模糊；

   此时，就用一张100×100 图片，手动的把它缩小为50×50（css像素），这样，我们准备的图片比实际需要的大 2 倍，就解决上面的问题（这方式就是 2倍图 ）。

4. 移动开发选择和技术解决方案

4.1 移动端主流方案

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

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

   也就是说，PC端和移动端为两套网站，pc端是pc端的样式，再写一套专门针对移动端适配的一套网站（比如京东）。

2. 响应式页面兼容移动端（次之）
   响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配（比如三星手机官网）。

4.2 移动端技术解决方案

1. 移动端浏览器兼容问题

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

   可以放心使用 H5 标签和 CSS3 样式，不用考虑兼容性问题。

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

2. 移动端公共样式

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

   Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

   normalize.css 特点如下：

   • 保护了有价值的默认值；
   • 修复了浏览器的 bug；
   • 模块化；
   • 拥有详细的文档。下载 normalize.css

4.3 CSS3盒子模型 box-sizing

        CSS 中的 box-sizing 属性定义了如何计算一个元素的 总宽度 和 总高度。

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

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

只要在CSS中加上“box-sizing: border-box;”这句，那么就将一个普通的盒子变成CSS3盒模型，padding和border就不会再撑大盒子了。

1. content-box
padding和border不被包含在定义的width和height之内。
2. border-box：
   padding和border被包含在定义的width和height之内。

移动端可以全部 使用 CSS3 盒子模型。

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

4.4 移动端特殊样式

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

/*禁用点击时高亮（灰色）背景：transparent 透明 */
-webkit-tap-highlight-color: transparent;

/*移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

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

-webkit-tap-highlight-color ：该属性只用于iOS (iPhone和iPad)，当用户点击一个a链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

5. 移动端常见布局

• 移动端单独制作

  • 流式布局（百分比布局）；
  • flex 弹性布局（强烈推荐）；
  • less+rem+ 媒体查询布局；
  • 混合布局。

• 响应式

  • 媒体查询；
  • bootstarp。
    
    

5.1 流式布局

流式布局，也称百分比布局、固定像素布局。

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

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

示例：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

5.2 flex布局

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

Flex布局： 又叫 伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 。

Flex 容器 / Flex 项目：采用 Flex 布局的元素，称为 Flex 容器；其子元素自动成为容器成员，称为 Flex 项目。

注： 当将父盒子设为 flex 布局后，子元素的 float、clear 、 vertical-align 属性将失效。


简单地说，就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。


【示例代码】：

① 给span设置宽度和高度，背景颜色，还有蓝色边框；
② 只需添加 “display:flex;”即可将父盒子div设为 Flex 布局。

如下所示：

<!-- HTML结构 -->
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

/* CSS样式 */
div {
	display: flex;
	width: 80%;
	height: 300px;
	background-color: pink;
	justify-content: space-around;
}
        
div span {
	/* width: 150px; */
	height: 100px;
	background-color: purple;
	margin-right: 5px;
	flex: 1;
}

5.2.1 父项常见属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1. flex-direction设置主轴的方向
   flex 布局中，分为 主轴 和 侧轴 两个方向（类似的叫法有 ：行和列、x 轴和y 轴）。

   • 默认主轴方向：x 轴方向（水平向右）
   • 默认侧轴方向：y 轴方向（水平向下）
     
     
     
   • 属性值

   属性值	说明
   row	默认从左到右
   row-reverse	从右到左
   column	从上到下
   column-reverse	从下到上

   ???? 注： 主轴 和 侧轴 是会变化的，这要看flex-direction设置谁为主轴，剩下的就是侧轴。而子元素是跟着主轴来排列的。
   
   

2. justify-content 设置主轴上的子元素排列方式
   justify-content 属性定义了项目在主轴上的对齐方式。

   注意：使用该属性之前一定要确定好主轴是哪个。

   性值	说明
   flex-start	默认值 从头部开始，如果主轴是 x 轴，则从左到右
   flex-end	从尾部开始排列
   center	在主轴居中对齐（如果主轴是x轴，则水平居中）
   space-around	平分剩余空间
   space-between	先两边贴边，再平分剩余空间（重要）

3. flex-wrap 设置子元素是否换行
   默认情况下，项目都排在一条线（又称轴线）上。flex-wrap属性定义， flex 布局中默认是不换行的 。
   • nowrap：不换行（默认值）；
   • wrap：换行。

   /* 不换行 */
   flex-wrap:nowrap
   
   /* 换行 */
   flex-wrap:wrap
   

4. falign-items 设置侧轴上的子元素排列方式（单行)

   该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项 （单行 的时候使用

~~未完待续

---

上一篇：重温前端基础（一） HTML、CSS、H5C3