移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀
为了兼容老版本
私有前缀
- -moz- : fixfox 浏览器私有属性
- -ms- : ie浏览器私有属性
- -webkit- : safari、chrome私有属性
- -o- ： Opera私有属性
提倡写法
-moz-border-radius ：10px；
-ms-border-radius ：10px；
-webkit-border-radius ：10px；
-o-border-radius ：10px；
分割线-----------------------------------------------------------
移动端基础
国内的移动端浏览器是根据webkit修改的内核，兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕大小不同，分辨率不同；不用关注分辨率
移动端调试方法
- chrome DevTools（谷歌浏览器）的模拟手机调试
- 搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器。
- 使用外网服务器，访问IP或者域名访问。
视口
视口：就是浏览器显示页面内容的屏幕区域。
视口可分为布局视口、视觉视口和理想视口
布局视口 layout viewport
iOS、Android基本上将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只是元素看上去很小，可以通过手动缩放页面。
视觉视口 visual viewport
用户能看到的区域，网站的区域
理想视口 ideal viewport
网站在移动端最理想的浏览和阅读宽度而设定。
需要手动添加meta视口标签通知浏览器操作。
meta视口标签
属性 ： 解释说明
width ： 设置viewport宽度，可以设置为device-width特殊值
initial-scale ：初始缩放比，大于0的数字
maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）
标准viewport设置
- 视口宽度和设备保持一致
- 视口缩放比默认1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
二倍图
物理像素：屏幕显示的最小颗粒，是物理真实存在的（分辨率）。
开发时候的1px不是一定等于1个物理像素。
pc端1px=1个物理像素，移动端不尽相同。
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
背景缩放 background-size
规定背景图像尺寸：
background-size：图像宽度 图像高度；
- 只写一个参数，就是宽度，高度等比例缩放。
- 单位可以用%，先对于父盒子
- cover 要完全覆盖父盒子，可能有部分背景图片显示不全
- contain 高度、宽度等比例拉伸，图像扩展至最大尺寸，有一个铺满盒子就不再拉伸了，可能有部分空白区域。
移动端开发选择
移动端主流方案
1.单独制作移动端页面（主流）
网址域名前加m（mobile）可以打开手机端页面
2.响应式兼容PC移动端
通过屏幕宽度来改变样式，以适应不同终端
缺点：制作麻烦，需要花费大量时间去调兼容性问题。
移动端技术解决方案
移动端css初始化推荐 normalize.css
css3 盒子模型 box-sizing：border-box；//盒子不会被撑大。
移动端可以全部用Css3；pc端要考虑兼容就用传统模式。
移动端链接清除点击高亮：-webkit-tap-highlight-color：transparent；
移动端按钮清除外观亮光效果：-webkit-appearance：none；
移动端禁止长按页面时弹出菜单： img，a{-webkit-touch-callout：none；}
移动端常见布局-流式布局
- 流式布局
1、又称“百分比布局”，也称非固定像素布局。
2、通过把盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。
3、是移动开发比较常见的布局
4、添加最大值和最小值保证页面内容
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
案例:京东移动端首页
方案：单独制作移动页面方案
技术：布局采用 流式布局
引入css初始化
图片和文字要写vertical-align:middle。
flex布局
pc端浏览器支持情况较差
flex布局原理:
弹性布局,任何容器都可以指定为flex布局
- 将父盒子设置为flex布局后,子元素的float、clear和vertical-align属性将失效。
- flex布局又称为 =伸缩布局=弹性布局=伸缩盒布局=弹性盒布局
- 采用flex布局的元素成为flex容器，简称“容器”。他的所有子元素自动成为容器成员，成为flex项目，简称“项目”。
通过给父元素添加flex属性，来控制子盒子的位置和排列方式。
flex布局父项属性
flex-direction 设置主轴方向
flex布局中分为主轴和侧轴两个方向，等同于行和列、x轴和y轴。
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，垂直向下
flex默认主轴是x轴 row，那y轴就是侧轴，元素沿着主轴排列；主轴是可以变化的，看flex-direction设置谁为主轴。
| 属性值 | 说明 |
|---|---|
| row | 默认的x轴，从左到右 |
| row-reverse | 从右到左 |
| column | y轴，从上到下 |
| column-reverse | 从下到上 |
justify-content 设置主轴上的子元素排列方式
justify-content 定义了子元素在主轴上的对齐方式；使用这个属性之前一定要确定好主轴是哪一个。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中，y轴则垂直居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间（重要） |
flex-wrap 子元素是否换行
flex布局中默认的子元素是不换行的，如果装不下会缩小子元素的宽度放到父元素里。
| 属性值 | 说明 |
|---|---|
| nowrap | 默认，不换行 |
| warp | 换行 |
align-items 设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中，y轴则垂直居中） |
| stretch | 拉伸（沿着侧轴拉伸，侧轴上不能设置长度） |
**align-content 设置侧轴上的子元素排列方式（多行） **
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中，y轴则垂直居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间（重要） |
| stretch | 拉伸（沿着侧轴拉伸，侧轴上不能设置长度） |
align-content 适用于换行（多行）的情况下，单行情况无效；单行找align-items，多行找align-content。
flex-flow 复合属性
flex-direction：row；
flex-warp：wrap；
简写：
flex-flow：row wrap；//以x轴为主轴，换行
flex布局 子项属性
flex属性
flex属性 定义子项目分配剩余空间，用flex来表示占多少份数。
.item{
flex:; //default 0
}
align-self 控制子盒子在侧轴上的排列方式
span:nth-child(2){
align-self: flex-end; //设置span里的第二个子盒子在侧轴上的排列方式
}
order 属性定义项目的排列顺序
默认是0 ，-1比0小，所以可以排在前面，数值越小越靠前。
span:nth-child(2){
order: -1;
}
这样span里的第二个子盒子就会排在最前面。
案例-携程网首页
之前的携程网首页,找不到图片资源,用其他图片代替,部分精灵图缺少,留有空白.
首页index代码
携程网移动端首页
搜索:目的地/景点/酒店/机票
我的
热门搜索
获取更多福利
/upload/row1.jpg)
/upload/row2.webp.jpg)
2
3
css样式 代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* 设置body大小 */
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
color: #000;
background-color: #f4f4f4;
/* overflow-x: hidden; */
height: 3000px;
}
/* 搜索模块 */
.search-index {
display: flex;
/* 固定定位 */
position: fixed;
top: 0;
left: 50%;
/* 不设置left值可以居中,如果要设置left值一定要设置居中代码 */
-webkit-transform: translateX(-50%);
/* 考虑兼容性问题 */
transform: translateX(-50%);
width: 100%;
/* 固定定位要有宽度 */
height: 44px;
max-width: 540px;
min-width: 320px;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
position: relative;
flex: 1;
height: 26px;
line-height: 24px;
font-size: 12px;
color: #666;
padding-left: 25px;
border: 1px solid #ccc;
margin: 6px 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search::before {
content: '';
/* display: block; */
position: absolute;
/* 加了绝对定位的盒子可以直接有大小 */
top: 2px;
left: 3px;
width: 22px;
height: 20px;
background: url(../images/tabbar.png) no-repeat -1px -75px;
background-size: 24px auto;
}
.main {
/* 因为要用flex布局,所以不用转换为块级元素 */
display: block;
width: 44px;
height: 44px;
text-align: center;
font-size: 12px;
color: blue;
}
.main::before {
content: '';
display: block;
/* 1.精灵图等比例缩放为原来的一半大小24*120 2.量图片大小24*24 3.量出图片坐标0 ,150*/
width: 22px;
height: 20px;
margin-left: 10px;
background: url(../images/tabbar.png) no-repeat -1px -75px;
background-size: 24px auto;
margin: 3px 10px -2px;
}
.focus {
padding-top: 44px;
}
.focus img {
width: 100%;
}
.local-nav {
display: flex;
height: 64px;
margin: 3px 3px;
background-color: #fff;
border-radius: 10px;
}
.local-nav li {
flex: 1;
}
.local-nav li a {
display: flex;
/* 把主轴改为y轴 */
flex-direction: column;
/* 再让侧轴x轴居中排列 */
align-items: center;
margin-top: 5px;
}
.local-nav-icon {
width: 32px;
height: 32px;
background-color: pink;
/* 插入精灵图 因为在携程上找到是单独图片,所以使用单独的图 */
background: url("../images/hotel.png") no-repeat;
background-size: 32px 32px;
background-color: #ccc;
}
.local-nav li a span {
font-size: 12px;
color: #000;
}
.local-nav li:nth-child(2) .local-nav-icon {
background: url("../images/flight.png") no-repeat;
background-size: 32px 32px;
background-color: #ccc;
}
}
/* nav部分 */
nav {
overflow: hidden;
border-radius: 8px;
margin: 0 3px 3px;
}
.nav-common {
display: flex;
border-radius: 8px;
height: 88px;
}
.nav-common .nav-items {
flex: 1;
display: flex;
flex-direction: column;
}
.nav-items a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.nav-items a:nth-child(1) {
border-bottom: 1px solid #fff;
}
/* 第一个盒子里面没有边框 */
.nav-items:nth-child(1) a {
border: 0;
/* 插入图片 */
}
/* 给前面两个盒子添加边框 -n+2 */
.nav-common .nav-items:nth-child(-n+2) {
border-right: 1px solid #fff;
}
.nav-common:nth-child(1) {
background: -webkit-linear-gradient(left, #FA5A55, #fa994d);
}
.nav-common:nth-child(2) {
margin: 2px 0;
/* linear-gradient背景渐变必须要添加浏览器私有前缀-webkit- ;left起始位置,默认是从上往下的*/
background: -webkit-linear-gradient(left, #06F, #0CF);
}
.nav-common:nth-child(3) {
background: -webkit-linear-gradient(left, #0c9, #0FC);
}
/* subnav 侧边导航模块 */
.subnav {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-radius: 8px;
margin: 2px 2px;
}
.subnav li {
flex: 20%;
/* 占比可以用百分数表示 */
}
.subnav li a {
display: flex;
flex-direction: column;
align-items: center;
margin: 2px 0;
}
.subnav li a span {
font-size: 12px;
color: #555;
}
.subnav-icon {
width: 25px;
height: 22px;
background: url(../images/tabbar.png) no-repeat 0 -25px;
background-size: 24px auto;
}
/* 新产品销售模块 */
.sales-box {
/* 有个上边框 上下左右有个margin值 */
border-top: 1px solid #ccc;
margin: 3px;
}
.sales-hd {
position: relative;
height: 44px;
border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
position: relative;
text-indent: -999px;
overflow: hidden;
}
.sales-hd h2::after {
content: '';
position: absolute;
top: 13px;
left: 14px;
width: 79px;
height: 15px;
background-color: pink;
/* 缺少精灵图素材,所以没有添加 */
}
.sales-hd .more {
position: absolute;
top: 10px;
right: 8px;
background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);
border-radius: 15px;
padding: 3px 20px 3px 10px;
color: #fff;
}
/* 用伪元素来写三角 */
.sales-hd .more::after {
content: '';
position: absolute;
top: 8px;
right: 9px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/* 让盒子旋转45度就是三角了 */
}
.row{
display: flex;
/* height: 50px; */
}
.row a {
flex: 1;
}
.row a img {
width: 100%;
}