结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
现在市场常见的移动端开发有单独制作移动端页面和相应式页面两种方案。
现在市场主流的选择还是单独制作移动端页面。
==============================================================================
-
移动端浏览器基本以
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;
}
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/
input {
-webkit-appearance: none;
}
/禁用长按页面时的弹出菜单/
img,
a {
-webkit-touch-callout: none;
}
a {
color: #666;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
div {
/* css3 盒子模型 */
box-sizing: border-box;
}
.clearfix:after {
content: “”;
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
.app {
height: 45px;
}
.app ul li {
float: left;
height: 45px;
line-height: 45px;
background-color: #333333;
text-align: center;
color: #fff;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img {
width: 10px;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 30px;
/* 图片默认和文字的底线对齐,此处设置图片与文字居中对齐 */
/* 这样的话,通过对文字设置行高的方式,就也可以实现图片的垂直居中对齐 */
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #f63515;
}
/* 搜索 */
.search-wrap {
position: fixed;
overflow: hidden;
width: 100%;
height: 44px;
min-width: 320px;
max-width: 640px;
}
.search-btn {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
}
.search-btn::before {
content: “”;
display: block;
width: 20px;
height: 18px;
background: url(…/images/s-btn.png) no-repeat;
background-size: 20px 18px;
margin: 14px 0 0 15px;
}
.search-login {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
color: #fff;
line-height: 44px;
}
.search {
position: relative;
height: 30px;
background-color: #fff;
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;
}
.jd-icon {
width: 20px;
height: 15px;
position: absolute;
top: 8px;
left: 13px;
background: url(…/images/jd.png) no-repeat;
background-size: 20px 15px;
}
.jd-icon::after {
content: “”;
position: absolute;
right: -8px;
top: 0;
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(…/images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px auto;
}
.slider img {
width: 100%;
}
/* 品牌日 */
.brand {
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.brand div {
float: left;
width: 33.33%;
}
.brand div img {
width: 100%;
}
/* nav */
nav {
padding-top: 5px;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
.jd-icon::after {
content: “”;
position: absolute;
right: -8px;
top: 0;
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(…/images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px auto;
}
.slider img {
width: 100%;
}
/* 品牌日 */
.brand {
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.brand div {
float: left;
width: 33.33%;
}
.brand div img {
width: 100%;
}
/* nav */
nav {
padding-top: 5px;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-d3NcreoA-1715637717948)]
[外链图片转存中…(img-MI67vFzJ-1715637717949)]