今日学习
- 移动端基础
- 视口
- 二倍图及 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%
最新:0基础3天Java入门课,总监级师资研发团队专为初学者打造!活动期间可享9.9元秒杀,前50报名还送价值200元学习礼包!
点击了解更多即可参与活动哦!