移动端布局笔记

1.移动web流式布局

1.移动端基础

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

学会用谷歌浏览器模拟手机界面及调试。

2.视口

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

2.1布局视口 layout viewport

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

不适合！

2.2视觉视口 visual viewport

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

2.3理想视口 ideal viewport

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

2.4 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	最小缩放比，大于O的数字
user-scalable	用户是否可以缩放, yes或no ( 1或0)

3.二倍图

3.1物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8 是 750* 1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同。PC端与手机端的像素比是1：2；
• 一个px的能显示的物理像素点的个数，称为物理像素比屏幕像素比

3.2 二倍图

1.我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100 *100就会模糊

2.我们采取的是放一个100 *100图片 然后手动的把这个图片 缩小为 50 *50 (css像素)

3.我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是2倍图。

3.3背景缩放 background-size

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

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

• 单位: 长度|百分比|cover | contain;
• cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background: ur1(images/dog.jpg)no-repeat;
/* background-size:图片的宽度图片的高度;*/
/* background-size: 500px 200px;*/
/* 1.只写一个参数肯定是宽度高度省略了会等比例缩放*/
/* background-size: 500px;*/
/* 2．里面的单位可以跟% 相对于父盒子来说的*/
/* background-size: 50%;*/
/* 3. cover要完全覆盖div盒子可能有部分背景图片显示不全*/
background-size: cover;
/*4.contain 高度和宽度等比例拉伸  当宽度 或者高度 铺满div盒子就不在进行拉伸了,可能会有部分空白区域*/
background-size: contain;

3.4二倍精灵图做法(重要)

• 在firework里面把精灵图等比例宿放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写∶精灵图原来宽度的一半

4.移动端开发选择

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

如：淘宝、京东商城、苏宁易购手机版等

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

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

如：三星手机官网等

5.移动端技术解决方案

5.1移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。

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

5.2 CSS初始化 normalize.css

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

• Normalize.css:保护了有价值的默认值
• Normalize.css:修复了浏览器的bug
• Normalize.css:是模块化的
• Normalize.css:拥有详细的文档

官网地址: http://necolas.github.io/normalize.css/

5.3 CSS3 盒子模型 box-sizing

• 传统模式宽度计算: 盒子的宽度=CSS中设置的width + border + padding
• CSS3盒子模型: 盒子的宽度=CSS中设置的宽度width里面包含了border和padding也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

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

传统or CSS3盒子模型?

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

5.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; }

6.移动端常见布局(重要)

6.1移动端技术选型

移动端布局和以前我们学习的PC端有所区别:

1.单独制作移动端页面（主流) 方式：

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

2==.响应式==页面兼容移动端（其次) 方式：

• 媒体查询

• bootstarp

6.2流式布局(百分比布局)

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。

为了合理显示内容：规定了两个参数

• max-width: 最大宽度（ max-height最大高度)
• min-width: 最小宽度（ min-height最小高度)

案例：京东移动端首页

分析：1.技术选型

​ 方案：我们采用单独制作移动页面方案

​ 技术：布局采取流式布局

​ 2.搭建项目

​ CSS文件夹、images文件夹、upload产品文件夹、index.html

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,
user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<!-- 引入CSS初始化文件 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入首页的CSS文件 -->
    <link rel="stylesheet" href="../css/index.css">

​ 4.常用初始化样式

body{
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

盒子外边距塌陷使用：overflow：hidden；

使用了position：fixed；固定定位，需要给盒子宽度；还需设置min-width和max-width;

6.3flex布局

6…3.1传统布局与flex布局

传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

flex弹性布局：

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

建议︰

1.如果是PC端页面布局，我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

6.3.2布局原理

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

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。

• 体验中div就是flex父容器。
• 体验中span就是子容器flex项目
• 子容器可以横向排列也可以纵向排列

总结flex布局原理∶

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

6.3.3常见父项属性

以下由6个属性是对父元素设置的

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

①. flex-direction设置主轴的方向★

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和y轴

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下

2.属性值

flex-direction属性决定主轴的方向(即项目的排列方向)
注意∶主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

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

②.justify-content设置主轴上的子元素排列方式★

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcjKHGU1-1638114655460)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211122232944509.png)]

<style>
      div {
     
        /* 给父级添加flex属性 */
        display: flex;
        width: 800px;
        height: 600px;
        background-color: pink;
        /* 默认值 从头部开始 ，默认主轴是X轴，则从左到右 */
        /* justify-content: flex-start; */
        /* 子元素从尾部开始排列 */
        /* justify-content: flex-end; */
        /* 子元素居中排列 */
        /* justify-content: center; */
        /* 平分剩余空间 */
        /* justify-content: space-around; */
        /* 子元素先两边贴边，再平分剩余空间 */
        /* justify-content: space-between; */

        /* 主轴为Y轴 */
        flex-direction: column;
         /* 子元素先两边贴边，再平分剩余空间 */
        /* justify-content: space-between; */
         /* 平分剩余空间 */
        /* justify-content: space-around; */
        /* 子元素居中排列 */
        justify-content: center;

      }
      div span {
     
        width: 150px;
        height: 100px;
        background-color: purple;
      }
    </style&