改变行高只是改变上下间距的大小，

目标：

知道移动WEB的开发现状
写出标准的viewport
使用移动WEB的调试方法
说出移动端常见的布局方案
描述流式分布
独立完成京东移动端首页

1. 移动端基础

2. 视口

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

3. 二倍图

二倍精灵图做法

先缩小一倍精灵图
量logo尺寸和坐标
css中background-size缩小一倍：114px auto ; (原来宽度是228)
设置background-position为量出来的坐标点

2014以上版本ps才能安装

4. 移动端开发选择

5. 移动端技术解决方案

6. 移动端常见布局

流式布局

flex布局

使用flex 布局后容器和item都会变成块级元素

   <style>a {display: flex;text-decoration: none;width: 100px;height: 100px;background-color: aqua;justify-content: space-around;align-items: center;}span {width: 20px;height: 20px;background-color: blueviolet;}</style>
</head>
<body><a href=""><span>1</span><span>1</span></a>
</body>

可以用百分比20%

案例

//二倍图
.search::before {content: '';position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../images/sprite.png) no-repeat -59px -279px;background-size: 104px auto;

rem+媒体查询适配布局

 @media screen and (max-width: 539px)  {body {background-color: blue;}}@media screen and (min-width: 540px) and (max-width: 969px ) {//可以省略（max-width:969px）效果一样body {background-color: pink;}}@media screen and (min-width: 970px) {body {background-color: saddlebrown;}}

小于用max-width,大于用min-width

1.rem+less+媒体查询

我们要做的效果是，在大分辨率的设备下，图片文字显示大一点，小分辨率的设备图片文字显示小一点

页面中的图片、文字不能用绝对单位px写死！，rem是相对单位,相对于根元素html的font-size大小，我们可以在不同的分辨率下改变html的font-size大小就可以实现、文字图片根设备适配的效果了。
那么根元素的font-size要去如何根据分辨率去改变呢？这就要用到媒体查询@media了，
要实现从320分辨率的设备到750px的设备图片文字等比例缩放大小，根元素的font-size不能乱写，要按比例！
例如2px的设备的font-size我们设为1，那么4px的设备的font-size我们就要设为2，320像素的设备/15份=21.33 750像素的设备就也要 / 15 = 50px，所以750px的设备font-size为50px,这样就可以实现等比例！当然这个除的分数随便你！
在一张750px的设计稿下量的div的宽度为100px，那我们应该怎么去写呢
首先，等比例的不同分辨率320px和750px的font-size我们已经设好了 分别为 21.33px和50px
根据设计稿，要在750像素的情况下，div要宽高为100px,
div的宽高要用rem做单位为了适配
那么在750px的分辨率下 div的宽高要多少rem才能等于100px呢？
就用750分辨率下的html的font-size来运算 100px / 50px = 2 所以div的宽高可以是 2rem
在不同分辨率下，媒体查询改变对应font-size, div的宽高也等比例缩放了

注意html {font-size:50px}要写在最前面，写后面会被层叠掉

pc端也可以访问移动端的网站

// 搜索模块
.search-content {position: fixed;left: 50%;top: 0;transform: translateX(-50%);height: (88rem / @baseFont);width: 15rem;background-color: #FFC001;
}

2.flexible.js +rem

使用时，当屏幕大于750px,font-size还是会跟随屏幕来放大

现在还是不行，还是超过750px

样式被覆盖了

解决方法：提高权重

响应式布局

一套页面可以适配三种设备手机、PC、ipad

<style>* {margin: 0;padding: 0;}.container {height: 150px;background-color: pink;margin: 0 auto;}/* 超小屏幕下 小于 768 布局容器的宽度为 100% */@media screen and (max-width:767px ){.container {width: 100%;}}/* 小屏幕下 大于等于768 布局容器改为 750 px */@media screen and (min-width:768px) {.container {width: 750px;}}/* 中等屏幕 大于992px 布局容器设置为 970px */@media screen and (min-width:992px) {.container {width: 970px;}}/* 大屏幕 大于1200px 布局容器宽度设置为1170px */@media screen and (min-width:1200px) {.container {width: 1170px;}}.container ul li {float: left;width: 11.11%;height: 30px;list-style: none;text-align: center;background-color: green;}@media screen and (max-width:767px) {.container ul li {width: 33.33%;}}</style>
</head>
<body><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>

移动端布局总结

vw vh移动端布局

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

pink-移动web开发之流式布局相关推荐

移动WEB开发之流式布局
第一章:移动端: 1.1 移动端基础 1.2 视口 1.2.1布局视口layout viewport 1.2.2 视觉视口visual viewport 1.2.3 理想视口ideal viewpo ...
移动WEB开发之流式布局-京东案例
2. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
移动端web开发之响应式布局
文章目录前言一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap 简介 2.2 Bootstrap 使用 2.3 布局容器 ...
移动端WEB开发之-响应式布局
目录移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 1.2 响应式布局容器 2.0 bootstrap的介绍 2.1Bootstrap简介 2.2 bootstrap优 ...
（49）移动端开发之流式布局（百分比布局）
一.流式布局(百分比布局)介绍流式布局,就是百分比布局,也称非固定像素布局. 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制, 内容向两侧填充. 流式布局方式是移动w ...
移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法当屏幕宽度<=768 ...
移动web学习(一) --- 流式布局, 视口viewpoint ,2倍图和3倍图, less
从这章开始,学习移动web 移动web开发指的是需要适配移动设备的网页开发,和pc端没有本质的区别,还是使用html,css,js 一.学习移动web的原因 1. 使用移动设备的用户越来越多 2. 一 ...

pink-移动web开发之流式布局