标签：box 01 盒子 适配 布局 视口 宽度 移动 百分比
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;
标签：box,01,盒子,适配,布局,视口,宽度,移动,百分比 来源： https://blog.csdn.net/qq_25564621/article/details/118605247
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。