1.移动端基础:
1.1浏览器现状:
PC端常见浏览器:谷歌、火狐、QQ、百度、搜狗、IE、360浏览器。
移动端常见浏览器:UC、QQ、百度、360、谷歌等。
国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核。
1.2手机屏幕现状:
1.3常见移动端屏幕尺寸:https://material.io/blog/device-metrics
1.4移动端调试方法:
总结:
2.视口:
视口:浏览器显示内容页面的屏幕区域。视口可以分为布局视口、视觉视口、理想视口。
2.1 布局视口layout viewport:
2.2 视觉视口visual viewport:
2.3 理想视口ideal viewport:
2.4 总结:
2.5 meta视口标签:
2.6 标准的viewport设置:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
3.二倍图:
3.1物理像素&物理像素比:
3.2 多倍图:
解决方法(以ipone8为例):把100*100的图片手动缩小到50*50。
3.3 背景缩放background-size:div { width: 500px; height: 500px; border: 2px solid red; background: url(ldh.jpg) no-repeat; /* 1.只写一个参数 肯定是宽度 高度省略了 */ /* background-size: 500px; */ /* 2.里面的单位可以跟% 相对于父盒子来说 */ /* background-size: 50%; */ /* 3. cover 等比例拉伸 背景图片完全覆盖div盒子 可能有部分背景图片显示不全*/ /* background-size: cover; */ /* 4. contain 高度和宽度等比例拉伸,当宽度或者高度铺满div盒子就不再进行拉伸,可能有部分空白区域*/ background-size: contain; }
3.4 背景二倍图及多倍图切图:
背景二倍图的原理跟上面一样,只是利用background-size来完成。
4.移动端开发选择:
4.1移动端主流方案:
4.2单独移动端页面(主流):通常情况下,域名前面加m(mobile)可以打开移动端。通过判断设备来实现移动端的跳转。
4.3响应式兼容PC移动端:通过判断屏幕宽度来改变样式。
缺点:制作麻烦,需要花很大精力去调兼容性问题。
5.移动端技术解决方案:
5.1移动端浏览器:
5.2 CSS初始化normalize.css:
5.3 CSS3盒子模型box-sizeing:<style> div:nth-child(1) { /* 传统盒子模型=width + padding +border */ box-sizing: content-box; width: 200px; height: 200px; background-color: skyblue; padding: 10px; border: 10px solid #000; } div:nth-child(2) { /* CSS3 盒子模型 */ box-sizing: border-box; width: 200px; height: 200px; background-color: yellow; padding: 10px; border: 10px solid #000; } </style>
5.4特殊样式:
6.移动端常见布局:
移动端技术选型:
6.1流式布局(百分比布局):通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
<style> * { margin: 0; padding: 0; } section { width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; } section div { float: left; width: 50%; height: 400px; } section div:nth-child(1) { background-color: skyblue; } section div:nth-child(2) { background-color: yellow; } </style>
6.2flex布局:
传统布局与flex布局:
flex布局原理:
flex布局父项常见属性:
1.flex-direction设置主轴的方向:
(1)主轴与侧轴:
(2)属性值:<style> div { /* 给父级添加flex属性 */ display: flex; width: 800px; height: 300px; background-color: skyblue; /* 默认的主轴是x轴,行row,y轴就是侧轴*/ /* 元素跟着主轴来排列的 */ /* flex-direction: row; */ /* 翻转,简单了解 */ /* flex-direction: row-reverse; */ /* 把主轴设置为y轴 */ flex-direction: column; } div span { width: 150px; height: 100px; background-color: yellow; } </style>
2.justify-content设置主轴子元素排列:
(1)属性值:<style> div { /* 给父级添加flex属性 */ display: flex; width: 800px; height: 300px; background-color: skyblue; /* 设置主轴上子元素的排列,默认从头部开始 */ /* justify-content: flex-start; */ /* 子元素排列从尾部开始 */ /* justify-content: end; */ /* 让子元素居中对齐 */ /* justify-content: center; */ /* 平均分配剩余空间 */ /* justify-content: space-around; */ /* 先两边贴边,再分配剩余空间 */ justify-content: space-between; } div span { width: 150px; height: 100px; background-color: yellow; } </style>
3.flex-wrap设置子元素是否换行:
(1)flex布局中,默认的子元素是不换行的,如果装不开,会缩小子元素的宽度,放到父元素里面。
(2)换行代码:flex-wrap: wrap;
4.align-items设置侧轴上的子元素排列方式(单行):
align-items: center;
5.align-content设置侧轴子元素排列(多行):
align-content和align-items的区别:
6.flex-flow属性是flex-direction和 flex-wrap属性的复合属性:
flex-flow: column wrap;
flex布局子项常见属性:
flex属性定义子项目分配属于空间,用flex来表示占多少份数。
flex属性使用:<style> section { display: flex; width: 60%; height: 150px; background-color: skyblue; margin: 0 auto; } section div:nth-child(1) { width: 100px; height: 150px; background-color: red; } section div:nth-child(2) { flex: 1; background-color: green; } section div:nth-child(3) { width: 100px; height: 150px; background-color: blue; } p { display: flex; width: 60%; height: 150px; background-color: skyblue; margin: 100px auto; } p span { flex: 1; } p span:nth-child(2) { flex: 2; background-color: yellow; } </style> </head> <body> <section> <div></div> <div></div> <div></div> </section> <p> <span>1</span><span>2</span><span>3</span> </p> </body>
align-self控制子项自己在侧轴上的排列方式。
order属性:数值越小,排列越靠前,默认为0。
6.3rem适配布局:
(1)rem基础:
rem的优点:通过修改html里面的文字大小来改变页面中元素的大小来实现整体控制。
(2)媒体查询:CSS3新语法。
@media针对不同的屏幕尺寸设置不同的样式。
语法规范:
mediatype媒体类型:
关键字:
媒体特性:<style> /* 背景变色 */ /* 小于540px 页面时,背景颜色为蓝色 */ @media screen and (max-width:539px) { body { background-color: skyblue; } } /* 当屏幕大于540且小于970时,背景颜色为红色(层叠性) */ @media screen and (min-width:540px) { body { background-color: red; } } /* 页面大于970时,背景颜色为黄色 */ @media screen and (min-width:970px) { body { background-color: yellow; } } </style>
(3)媒体查询+rem实现元素动态大小变化:
<style> @media screen and (min-width:320px) { html { font-size: 50px; } } @media screen and (min-width:640px) { html { font-size: 100px; } } .top { height: 1rem; font-size: 0.5rem; background-color: green; color: #fff; text-align: center; line-height: 1rem; } </style>
(4)引入资源:针对不同的屏幕尺寸,调用不同的css文件。
(5)Less基础:
CSS的弊端:
Less介绍:
Less变量:
Less编译:
Less嵌套:
子元素的样式直接写到父元素里面;
如果有伪类、交集、伪元素选择器,我们内层选择器前面需要加&(不加则会当后代来看)。
Less运算:
(6)rem适配方案1原理:
适配的目标是什么?如何达到这个目标?
如何在实际开发中使用?
元素大小取值方法:页面元素的rem值=页面元素值(px) / html font-size字体大小。
或者:页面元素的rem值=页面元素值(px) / (屏幕宽度 / 划分的份数)
(7)rem适配方案2原理:
简洁高效的rem适配方案flexible.js:
6.4响应式布局:
(1)响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
(2)响应式布局容器:响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。<style> .container { height: 150px; background-color: skyblue; margin: 0 auto; } /* 1.超小屏幕下 小于768,布局容器的宽度为100% */ @media screen and (max-width:767px) { .container { width: 100%; } } /* 2.小屏幕下 大于等于768,布局容器改为750px */ @media screen and (min-width:768px) { .container { width: 750px; } } /* 3.中等屏幕下 大于等于992px, 布局容器修改为970px */ @media screen and (min-width:992px) { .container { width: 970px; } } /* 4.大屏幕下 大于等于1200px,布局容器修改为1170px */ @media screen and (min-width:1200px) { .container { width: 1170px; } } </style> </head> <body> <!-- 响应式开发里面,首先需要一个布局容器 --> <div class="container"></div> </body>
(3)Bootstrap开发框架:
优点:
Bootstrap使用:
布局容器:
(4)Bootstrap栅格系统:
栅格系统简介:
栅格选项参数:
(5)列嵌套:
(6)列偏移:
(7)列排序:
bootstrap4.0以上已废弃该用法,转为order权重。
(8)响应式工具: