-
单位:长度 | 百分比 | cover | contain
-
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
-
contain 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
注意:
-
以长度为单位时,只写其中一个参数,另一个参数会自动适配
-
以百分比为单位时,其参照对象为父盒子,只写其中一个参数,另一个参数会自动适配
【cover & contain 案例】
cover 案例:
background-size: cover;
contain 案例:
background-size: contain;
当图片是竖直放置时:
【背景缩放案例】
一次性导出多种倍数的图片
============================================================================
(1)单独制作移动端页面【主流】
-
京东 https://m.jd.com/
-
淘宝 https://m.taobao.com/
-
苏宁 https://m.suning.com/
-
……
(2)响应式页面兼容移动端【其次】
-
https://www.samsungeshop.com.cn/
-
……
通常情况下,网址域名前面加m(mobile)
可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
通过判断浏览器窗口宽度来改变样式,以适应不同终端。
缺点:制作麻烦,需要花很大精力去调兼容性问题。
现在市场常见的移动端开发有单独制作移动端页面和相应式页面两种方案。
现在市场主流的选择还是单独制作移动端页面。
==============================================================================
-
移动端浏览器基本以
webkit
内核为主,因此我们就考虑webkit
兼容性问题 -
我们可以放心使用H5标签和CSS3样式
-
同时我们浏览器的私有前缀我们只要考虑添加
webkit
即可
移动端CSS初始化推荐使用normalize.css/
-
Normalize.css:保护了有价值的默认值
-
Normalize.css:修复了浏览器的bug
-
Normalize.css:是模块化的
-
Normalize.css:拥有详细的文档
官网地址:http://necolas.github.io/normalize.css/
-
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
-
CSS3盒子模型:盒子的宽度 = CSS中设置的宽度width,里面包含了border和padding
也就是说,我们的CSS3中的盒子模型,padding和border不会撑大盒子了
/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;
传统 or CSS3盒子模型?
-
移动端可以全部使用CSS3盒子模型
-
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择CSS3盒子模型
案例:
/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮,我们一般需要清除,设置 transparent 完成透明 */
/* 说明:比如a链接在移动端默认点击时会有一个背景颜色高亮 */
-webkit-tap-highlight-color: transparent;
/* 比如可以这样: */
- {
-webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 比如可以这样: */
input {
-webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
-webkit-touch-callout: none;
/* 此处以img及a为例子 */
img, a { -webkit-touch-callout: none; }
============================================================================
【移动端技术选型】
移动端布局和以前我们学习的PC端有所区别:
(1)单独制作移动端页面【主流】
-
流式布局(百分比布局)
-
flex 弹性布局(强烈推荐)
-
less + rem + 媒体查询布局
-
混合布局
(2)响应式页面兼容移动端【其次】
-
媒体查询
-
bootstrap
-
流式布局,就是百分比布局,也称非固定像素布局
-
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限时,内容向两侧填充
-
流式布局方式是移动Web开发使用的比较常见的布局方式
-
max-width
最大宽度(max-height
最大高度) -
min-width
最小宽度(min-height
最小高度)
案例:
【项目结构】
【HTML】
<meta name=“viewport”
content=“width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0”>
- 打开京东App,购物更轻松
- 立即打开
- 登陆
京东超市
京东超市
京东超市
京东超市
京东超市
京东超市
京东超市
京东超市
京东超市
京东超市
【CSS】
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
/点击高亮我们需要清除清除 设置为transparent 完成透明/
- {
-webkit-tap-highlight-color: transparent;
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。
, sans-serif;
color: #666;
line-height: 1.5;
}
/点击高亮我们需要清除清除 设置为transparent 完成透明/
- {
-webkit-tap-highlight-color: transparent;
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。[外链图片转存中…(img-5pPgQsTJ-1710745913959)]
[外链图片转存中…(img-W8QFn5Di-1710745913959)]
[外链图片转存中…(img-I5oMqNxQ-1710745913960)]
[外链图片转存中…(img-IX7SvuuQ-1710745913960)]由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-tml4pCDO-1710745913960)]JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。