html页面缩小布局乱了为什么啊_前端学习教程：移动端开发之流式布局（京东移动端首页制作

今日学习

0. 移动端基础
1. 视口
2. 二倍图及 background-size
3. 移动端调试
4. 移动端技术解决方案 box-sizing
5. 移动端常见布局
6. 移动端开发之流式布局
7. 京东移动端首页制作

移动端浏览器的兼容

• 移动端的浏览器主要是处理webkit内核的兼容
• 移动端调试
• 真机调试

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

视口

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

• 布局视口 ---- 例如 980
• 视觉视口 --- 看到屏幕大小
• 理想视口 --- 让布局理想视口是多大 布局视口多大
• meta

width=device-width ----- 宽度设置为设备的宽度initial-scale=1    ----- 初始渲染的缩放比user-scalable=no     ------ 是否允许用户缩放   yes是 允许  no  不允许maximun-sacle=1    ------ 最大缩放比minimum-scale=1    ------ 最小缩放比

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

物理像素与物理像素比

• 物理像素 -- 分辨率
• iphone8 750* 1344
• 物理像素比 -- 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• 不是绝对的 1:1 针对各个设备 不同 1:2 1:3 只要比>2 高清屏幕 在 iphone中 高清屏幕 retina 屏 ios专利

二倍图

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

二倍图原理演示代码：

修改背景图大小 -- background-size

0. background-size : 具体的像素值 具体的像素值 ; 只写一个值 另一个值会等比例缩放
1. background-size: 百分比 辈分比 ; 只写一个值 另一个值会等比例缩放 百分比参照容器的百分比
2. background-size:cover 背景图铺满整个容器背景图过小 背景图会等比例放大铺满整个容器 可能部分内容不可见背景图过大 背景图会等比例缩小铺满整个容器 可能部分内容不可见
3. background-size:contain ; 宽度或者高度铺满 另一边不再进行缩放了 背景图等比例缩放 显示完整背景图 可能出现容器的空白区域背景图过小 背景图会放大 背景图过大 背景图会缩小

多倍切图

切图神器 -- cutterman

移动web页面

• 单独的写关于移动端的页面
• css初始化 normalize.css

盒子内减模型

• box-sizing:content-box; 默认值 -- 传统的盒子模型 宽度 = 内容 + padding + border

• box-sizing:border-box --c3盒子模型 盒子的宽度 包含内容 和 padding 和border不需要再进行数学运算

清除移动端自带样式

    /*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; }

选型

0. 流式布局 (百分比布局)
1. flex布局(伸缩布局/弹性布局)
2. rem布局
3. 响应式布局--本质： 媒体查询

流式布局

• 百分比来设置元素的宽度

jd移动端

0. 新建文件夹
1. index.html设置我们的视口
2. 引入初始化的css文件 引入自己的css文件

body设置

0. 宽度先设置100% ，引入初始化样式;
1. 设置最大宽度640px 和最小宽度320px
2. 设置水平居中
3. 字体大小 字体样式 背景色

app设置

• 四个盒子设置浮动 设置高度 设置对应的背景色 盒子1 -- 8% 图片 修改图片的大小 盒子2 -- 10% 图片 修改图片的大小 设置图与文字中线对齐盒子3 -- 57% 文字 垂直居中 颜色盒子4 --- 25% 文字 垂直居中 颜色

导航设置

• 圣杯布局|| 双飞翼布局
• 3个盒子盒子1 和 盒子3 进行定位 盒子1左对齐 盒子3 右对齐盒子 宽度不要设置 margin-left margin-right 盒子1 放背景图 配合background-size 调整位置盒子3 放文字 调整位置 颜色盒子2 div 背景图 配合background-size 调整位置 盒子2中竖线 伪元素 实现 盒子2中的 小搜索图 因为背景图是2倍图 先将精灵图缩小为原来宽度的一半 ps 测量精灵图的偏移距离 background-position: 修改精灵图的大小background-size 不能设置50% ， 因为百分比 是参考的是容器的百分比值

焦点图

0. 容器中图片width:100% ;
1. 处理搜索框 fixed ; 设置宽度 100% min-width: max-width:
2. 图片格式 jpg png gif dpg webp bmp svg
3. 去除图片的4px的问题

图片基线对齐几像素的问题4px

默认字体16px 图片的基线对齐的时候会有4px 字体12px 间距3px

解决基线对齐问题：  vertical-align: middle或者top、bottom;

品牌日

0. 设置3个div 全部左浮动 设置宽度为33.333333%
1. 3个div中的图片 设置宽度为100%

导航

0. 放置10个a标签 左浮动 宽度设置为20%

新闻模块

0. 3个盒子 盒子1 50% 盒子2 3 25% 盒子2盒子3 添加边框 box-sizing:border-box 图片宽度设置100%

最新：0基础3天Java入门课，总监级师资研发团队专为初学者打造！活动期间可享9.9元秒杀，前50报名还送价值200元学习礼包！

点击了解更多即可参与活动哦！