前端学习教程：移动端开发之流式布局（京东移动端首页制作）

今日学习

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

移动端浏览器的兼容

移动端的浏览器主要是处理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

background-size : 具体的像素值 具体的像素值 ; 只写一个值 另一个值会等比例缩放background-size: 百分比 辈分比 ; 只写一个值 另一个值会等比例缩放 百分比参照容器的百分比background-size:cover 背景图铺满整个容器背景图过小 背景图会等比例放大铺满整个容器 可能部分内容不可见背景图过大 背景图会等比例缩小铺满整个容器 可能部分内容不可见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; }

选型

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

百分比来设置元素的宽度jd移动端

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

宽度先设置100% ，引入初始化样式;设置最大宽度640px 和最小宽度320px 设置水平居中 字体大小 字体样式 背景色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% ， 因为百分比 是参考的是容器的百分比值焦点图

容器中图片width:100% ;处理搜索框 fixed ; 设置宽度 100% min-width: max-width:图片格式 jpg png gif dpg webp bmp svg去除图片的4px的问题图片基线对齐几像素的问题4px

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

解决基线对齐问题：

vertical-align: middle或者top、bottom;

品牌日

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

放置10个a标签 左浮动 宽度设置为20% 新闻模块

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