移动端网页开发

移动web开发基础

关于浏览器：

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

移动端调试方法：

1.Chrome DevTools 的模拟手机调试。

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

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

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

视口

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

布局视口layout viewport

视觉视口visual viewport:

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

理想视口 ideal viewport:

1.为了使网站在移动端最有理想的浏览和阅读宽度而设定的。

2.理想视口，对设备来讲，是最理想的视口尺寸。

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

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

meta视口标签：

属性值

width:设置视口宽度，可以设置device-width特殊值。

initial-scale:初始缩放比，大于0的数字。

maximum-scale:最大缩放比，大于0的数字

minimum-scale:最小缩放比，大于0的数字。

user-scalable：用户是否可以缩放，yes或者no（1或0）。

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

二倍图

物理像素&物理像素比

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

物理像素比：一个px的能显示的物理像素点个数。

移动端开发选择

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

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

响应式兼容PC移动端

响应式网站，即pc端和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。

移动端常见问题解决方案

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

CSS初始化normalize.css

优点：

1.保护了有价值的默认值。

2.修复了浏览器的bug，解决了浏览器的不一致的默认样式。

3.Normalize.css是模块化，提高了易用性。

4.Normalize.css拥有详细的文档。

移动端技术选型

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

1.流式布局(百分比布局)

2.flex弹性其布局（强烈推荐）

3.less+rem+媒体查询布局

4.混合布局

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

1.媒体查询

2.bootstrap

流式布局（百分比布局）

1.流失布局，就是百分比布局，也成非固定像素布局

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

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

注意事项：

定义最大和最小支持宽度。

1.max-width最大宽度（max-height最大高度）

2.min-width最小宽度（min-height最小高度）

传统布局与flex布局

传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局。

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

flex布局父项常见属性：

flex-direction 设置主轴方向。默认主轴为x轴方向，侧周则是y轴方向。

属性值：

row 默认从左到右

row-reverse 从右到左

column 从上到下

column-reserve 从下到上

justify-content主轴上子元素的排列方式

属性值：

flex-start 默认值，从头部开始，如果主轴是x轴则从左到右

flex-end 从尾部开始排列

center 在主轴居中对齐，如果主轴是x轴则水平居中

space-around 平分剩余空间

space-between 先两边贴边再平分剩余空间

flex-wrap设置子元素是否换行

属性值：

nowrap 默认值，不换行

wrap 换行

align-items 侧轴上子元素排列方式（单行）

属性值：

flex-start 默认值，从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸

align-content侧轴子元素排列方式（多行）

属性值：

flex-start 在侧周头部开始排列

flex-enf 从侧轴的尾部开始排列

center 在侧周中间显示

space-around 子项在侧轴平分剩余空间

space-between 子项在侧周先分布在两头，再平分剩余空间

stretch 设置子项元素高度平分父元素高度

flex-flow:

flex-flow:是flex-direction和flex-wrap属性的复合属性。

flex属性：

定义子项目分配父盒子剩余空间，用flex来表示占多少份数。

属性值为数字，数字1则表示占总份数中的一份，默认值是0.

.item{
flex:<number>;
}

align-self控制子项自己在侧周上的排列方式。(可覆盖)

例如：

span:nth-child(2){
align-self:flex-end;
}

rem 单位

rem的优势：参考元素是固定的。

媒体查询

语法规范：

1.用@media开头，注意@符号。

2.mediatype媒体类型。

3.关键字 and not only

4.media feature媒体特性必须有小括号包含。

    body{
        background-color:pink;
    }
    <!-- 对内容进行设置，如背景颜色等等，如 -->
}

媒体类型：

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，只能手机等

媒体特性：

width:定义输出可见宽度

min-width:定义输出设备中页面最小可见可见区域宽度max-width:定义输出设备中页面最大可见可见区域宽度

引入资源方法

<link rel="stylesheet" href="文件" media="screen and (min-width:320px)">

less变量

@变量名:值;

变量使用规范：

@color:pink;
body{
    color:@color;
}
a:hover{
    color:@color;
}

less嵌套写法

如传统写法：

 #header .logo{
    width:300px;
}

less嵌套写法

 #header {
    .logo{
        width:300px;
    }
}

如果遇见（交集|伪类|伪元素选择器）

1.内层选择器的前面没有&符号，则他被解析为父选择器的后代

2.如果有&符号，则是父元素自身或者父元素的伪类。

a{
    &:hover{
        color:red;
    }
}

less运算：(运算符左右必须加空格)

@width:10px + 5;
div{
    border:@width solid red;
}
div{
    border:15px solid red;
}
width:(@width + 5) * 2;

rem适配方案：

1.按照设计稿与设备宽度比例，动态计算并设置html根标签的font-size大小；(媒体查询)

2.CSS中，设计稿元素的宽，高，相对位置等取值，按照同等比例换算为rem为单位的值。

1.less+媒体查询+rem

2.flexible.js+rem(简单)

方案一：

设计稿常见宽度

响应式开发原理：

使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。

超小屏幕（手机） <768px

小屏设备（平板） >=768px~<992px

中等屏幕（桌面显示器） >=992px~<1200px

宽屏设备（大桌面显示器） >=1200px

Bootstrap

使用步骤：

1.创建文件结构

2.创建html骨架结构

3.引入相关样式文件

4.书写内容