移动端前端开发知识汇总_网站前端开发_前端开发者

网站前端开发_前端开发者丨前端资源

https://www.rokub.com

读者具备基础

1、熟练的使用htmlcss

2、对HTML5和CSS3有一定的了解,这个不必深入

3、掌握JavaScript、jquery脚本语言

(1)关于引入图标问题html 代码

注释:细心的读者可能会问加不加最后一行代码既然效果都是一样的,那么为什么要多此一举呢,其中一般这个Logo图标不但可以运用在标题中,而且还可以放在收藏夹中去使用,只需要将添加标题栏中rel=”short icon”改为rel=”bookmark”即可

 

(2)在手机网页的制作上,我们一般是不让用户手动的去改变页面的大小的,所以下面的这一句是必须加上的
html 代码

除了上面的这一句,下面的这些也是制作手机页面必须加上的
html 代码

除此之外,还有其他一些的属性供你自由的选择
html 代码

(3)获取滚动条的滚动值
html 代码

*桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?就是上面两个属性,但是事实证明android也支持这属性,所以索性都用woindow.scroll.
(4)禁止用户选择文本
html 代码

*这个属性是禁止用户选择文本,对安卓和苹果都是有效的。
(5)手机图片和视频上传
html 代码

(6)动画特效开启加速
html 代码

(7)设置placeholder时候 focus时候文字没有隐藏
html 代码

(8)移动前端适配问题
如今手机屏幕尺寸越来越多,可以考虑在html头部head标签中先插入一个meta标签,在插入一个脚本设置缩放值:
html 代码

【About】开发时候一般根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦,不过有工具)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。

### ——学习响应式网页设计最好的5本书

[ol]
[li]1、Responsive web Design(响应式网页设计)[/li]
[li]2、Responsive web Design with HTML5 and CSS3[/li]
[li]3、Responsive Design workflow[/li]
[li]4、Responsive Design with WordPress[/li]
[li]5、Implementing Responsive Design[/li]
[/ol]
[color=red]【剁手—充电】[/color]楼楼昨天百度了下关于响应式布局的书籍,找了一下午,发现这几本书还不错,值得买来翻阅,故推荐给各位。不过,书是全英文。
感觉过了四级,然并卵!有兴趣的同学可以去亚马逊上自购哟!

### ——手机端页面自适应解决方案—rem布局

【最顺手最简单的布局方案——rem(什么是rem)布局】

rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了:

html 代码

【如何使用?】
这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
于是,问题来了,为什么要这样?别急,我先来一一回答
为什么是640px?
对于手机屏幕来说,640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iphone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的css逻辑像素数为320 x 568px。
如果要切移动端页面,你可以先把效果图宽度等比例缩放到640px,很好用。
为什么要设置html的font-size?
rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。
此时,此时宽60px,高40px的元素样式就这样设置如下 ↓

width: 3rem;height: 2rem;
那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓
width: 2.75rem;height: 1.85rem;
是不是发现这换算起来有点麻烦啊,,,(当然,你要是心算帝请无视)
如果我们一开始把html的font-size设为100px呢?此时1rem = 100px,那么上面的宽,高就可以这么设置 ↓
width: 0.55rem;height: 0.37rem;
是不是换算起来简单多了?!
(当然可能有同学问,为什么不一开始把html的font-size设为1px呢,这样换算起来也简单,答:浏览器一般都有最小字体限制,比如谷歌浏览器,最小中文字体就是12px,所以实际上没有办法让1rem=1px。)

根据上面的js代码,如果页面宽度低于640px,那么页面中html的font-size也会按照(当前页面宽度/640)的比例变化。这样,页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了!

【都哪些情况可以用rem布局?】
大部分情况下都可以用rem布局这个方法,当然具体还要看情况而定。拿我们公司项目举例,只有底部的导航不用rem,而是用的flex布局。因为导航点击最多,所以给它一个固定的大小(其实就是高度固定,宽度自适应的方案)。大家可以看看淘宝的这个手机页面 淘宝手机站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。

【心得】
在rem布局中,有一些自己积累的小技巧给大家分享下。
页面中模块间距离一般为0.2rem。字体的大小一般分为四个档次 0.2rem 0.24rem 0.28rem 0.32rem。
拿我们项目举例,我们移动端页面效果图的宽度都定在了640px。于是我在项目中,最外层的div样式就设置成了position: relative;width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;
所有的元素都可以写在这个div中了,于是就可以开始写样式了。
rem布局中,如果有个元素需要水平居中固定到页面底部,你会怎么设置它的样式呢。
我是这样做的,前提是这个元素还是在前面说的最外层水平居中的大div中,样式如下:position: fixed;bottom: 0;z-index: 100;width: 100%;max-width: 640px;min-width: 320px;

代码效果
html 代码

【常见的问题集合】

(1)移动端如何定义字体font-family
(2)移动端字体单位font-size选择px还是rem
(3)移动端touch事件(区分webkit 和 winphone)
(4)什么是Retina 显示屏,带来了什么问题

网站前端开发_前端开发者丨前端资源

https://www.rokub.com

» 本文来自:前端开发者 » 《移动端前端开发知识汇总_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2558.html
» 您也可以订阅本站:https://www.rokub.com
赞(2)
64K

评论 抢沙发

评论前必须登录!