1:图片可以在parent中使用
1:line-heigh和text-align使水平和竖直居中
2:在img标签中加vertical-align: middle;
2:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 ,
maximum-scale=1, minimum-scale=1">
3:background-size
1:两个参数:background-size:500px 200px;
2:只写一个参数:设置宽度,高度会等比例拉伸;
3:可以写百分比:50%为parent的一般:
4:cover:完全填充盒子,可能有部分背景图片显示不全;
contain:宽高等比例拉伸,宽或者高铺满,则不再拉伸,可能有部分空白区域;
4:css3盒子模型:box-sizing:border-box;
传统盒子模型:box-sizing:content-box;
5:兼容
1:点击高亮(超链接)显示:
*{
-webkit-tap-highlight-color:transparent;
}
2:给按钮和输入框添加样式:
inout,buttom{
-webkit-appearance: none;
}
3:禁止长安页面弹出菜单:
img,a{
-webkit-touch-callout: none;
}
6:移动端常见布局:
1:单独制作移动端页面:
1:流式布局
1:定义:百分百布局,也成为非固定像素布局;
2:通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素限制,内容向两侧填充;
3:流式布局为为移动端较为常见的布局方式;
4:通常设定
1:max-width:
2:min-width:
5:盒子宽度设置为100%;
2:flex弹性布局(强烈推荐)
3:rem+less+媒体查询布局
4:混合布局
2:响应式兼容移动端:
1:媒体查询;
2:bootstarp;
7:二倍雪碧图处理:firework
8:图片格式:
1:dpg图片压缩技术:
京东自主研发dpg格式,直接节省用户50%的浏览时间;
2:webp图片格式:
google开发的,加快图片加载速度;只要原来的2/3;
移动端web开发:
1:移动端基础
2:视口
3:二倍图
4:移动端调试
5:移动端技术解决方案
6:移动端常见布局
7:移动端开发流式布局
8:jd首页制作
1:移动端开发流式布局:
1:浏览器现状:
1:pc浏览器:
360,firfox,google,safiry,ie,sougou
2:手机浏览器:(对兼容性支持比较好)
uc,qq,欧朋,百度,360
3:移动端支持只需要考虑webkit内核就可以了;
2:移动端调试方式:
1:chrome devtools(google)模拟手机调试;
2:搭建本地web服务器,手机和服务器在同一个局域网中,通过手机访问服务器;
3:使用外网访问;
2:移动端基础
1:移动端浏览器主要针对webkit内核进行兼容
2:移动端主要针对手机端开发
3:使用chrome浏览器模拟手机界面进行调试
3:视口(viewport):布局视口,视觉视口,理想视口
1:理想视口:
1:为了网站最理想的浏览和阅读宽度而设定;
2:对设备来讲,是最理想的视口尺寸;
3:需要手动添加meta视口标签通知浏览器操作;
4:meta视口标签的主要目的:使布局视口的宽度与理想视口的宽度一致;
5:标签属性:
1:width:设置viewport的宽度;
2:initial-scale:初始化缩放比,>0 ;
3:maximum-scale:最大缩放比,>0;
4:minimum-scale:最小缩放比,>0;
5:user-scalable:用户是否可缩放;(yes或者no/1或0)
6:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 ,
maximum-scale=1, minimum-scale=1">
2:布局视口:layout viewport,通过压缩版面,会导致字体很小
3:视觉视口:visual viewport,通过压缩版面,会导致字体很小
4:二倍图:
1:在pc中1px=1物理像素,在iphone中1px=2物理像素;
2:物理像素和屏幕像素比(1.0/2.0/3.0)
5:多倍图:使用倍图的方式解决像素被稀释的问题;
6:背景图片的缩放:(css3)background-size:背景图像的尺寸;(图片的宽度和高度)
1:使用方式:
1:两个参数:background-size:500px 200px;
2:只写一个参数:设置宽度,高度会等比例拉伸;
3:可以写百分比:50%为parent的一般:
4:cover:完全填充盒子,可能有部分背景图片显示不全;
contain:宽高等比例拉伸,宽或者高铺满,则不再拉伸,可能有部分空白区域;
7:背景图片二倍图:
使用background-size:对二倍图进行缩放;
8:移动端开发选择:
1:单独制作移动端页面(主流)
1:京东,淘宝,苏宁
2:网址前面加m,可以打开移动端,通过判断设备,如果是移动端打开,则跳转到移动端界面;
2:响应式页面兼容移动端;
一套界面:通过响应不同的宽度,进而显示不同的界面;
缺点:兼容性问题;
9:移动端技术解决方案;
1:移动端浏览器:只需考虑webkit内核即可,
可以尽情使用h5和css3
2:css初始化:
normalize.css;
移动端css推荐使用normalize.css
优点:
1:保护有价值的默认值;
2:修复了浏览器bug
3:模块化
4:拥有详细文档;
body {
margin:0;
}
3:css3盒子模型:box-sizing;
1:传统盒子模型:盒子的宽度:width+border+padding;
box-sizing:content-box;传统盒模型
2:css3盒子模型:盒子宽度:width(里面包含了border和padding)
box-sizing:border-box;css3盒子模型;
4:特殊样式:
1:点击高亮(超链接)显示:
-webket-tap-highlight-color:transparent;
2:给按钮和输入框添加样式:
-webkit-appearance: none;
3:禁止长安页面弹出菜单:
img,a{
-webkit-touch-callout: none;
}
4:c3盒子模型:
box-sizing:border-box;
10:移动端常见布局:
1:单独制作移动端页面:
1:流式布局
1:定义:百分百布局,也成为非固定像素布局;
2:通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素限制,内容向两侧填充;
3:流式布局为为移动端较为常见的布局方式;
4:通常设定
1:max-width:
2:min-width:
5:盒子宽度设置为100%;
2:flex弹性布局(强烈推荐)
3:rem+less+媒体查询布局
4:混合布局
2:响应式兼容移动端:
1:媒体查询;
2:bootstarp;