移动端开发(学好移动端这一篇就够啦)

移动端开发(学好移动端这一篇就够啦)虽然还是vw布局,但还是⽤rem去写1、⽆关屏幕的⼤⼩,反正100vw,就是屏幕的100%,⽤屏幕的⼤⼩作为固定值去换算相对单位2、⾃定义⼀个rem跟px之间的换算⽐值,为了好算⼀般是1rem=100px,计算出vw跟rem,px之间的关系例如750的设计稿:1font-size=100px=1rem=13.3333vw3、后⾯750设计稿上的所有尺⼨都⽤rem来算。例如200px*200px的盒⼦,就是2rem*2rem的盒⼦,也就是26.666vw*26.666vw的盒⼦。⽤vw去开发。

文章目录

前言

一、移动端的一些概念

(⼀)、屏幕相关

1、屏幕⼤⼩:

2、屏幕分辨率

3、屏幕密度(ppi)

(⼆)、像素相关

2、css像素

3、设备独⽴像素

4、像素⽐

5、像素之间的关系

(三)、图⽚⾼清显示

1、位图像素

(四)、视⼝概念

视⼝(viewport)就是浏览器显示⻚⾯内容的屏幕区域

(五)、meta标签设置

(六)、多倍图的概念

命名特点:

(七)、移动端 运⾏在移动设备上的产品

响应式设计原则: 

渐近增强 基本需求==>更好体验

优雅降级 完备功能==>向下兼容

移动优先的响应式布局采⽤的是渐进增强原则

⼆、移动端开发选择

(⼀)、移动端主流适配⽅案

1、单独制作移动端⻚⾯

2、响应式⻚⾯兼容移动端

(⼆)、移动端开发⼏个注意点

三、移动端常⻅实现⽅式

(⼀)、移动端的技术选型

1、单独制作移动端⻚⾯

语法:

关键字 and not only 来连接

媒体特性(必须要有⼩括号)

(3)、rem适配⽅案

(4)、flexible.js实现

4>、混合布局(主流)

5>、vw、vh(未来的趋势)

bootstarp框架:https://www.bootcss.com/

总结


前言

一、移动端的一些概念

(⼀)、屏幕相关

1、屏幕⼤⼩:

指屏幕的对⻆线⻓度,单位是英⼨(inch)。常⽤尺⼨有:3.5⼨、4.7⼨、5.0⼨、5.5⼨、6.0⼨等 备注:1英⼨(inch)=2.54厘⽶(cm)

2、屏幕分辨率

指屏幕在:横向、纵向上所拥有的物理像素点总数,⼀般表示⽤n * m表示 例如:iPhone6的屏幕分辨率为750 * 1334

注意:屏幕分辨率是⼀个固定值,屏幕⽣产出来就确定了,⽆法修改

屏幕分辨率、显示分辨率是两个概念,系统设置中可以修改的是显示分辨率

显示分辨率是设备当前所⽤到的物理像素点,也可以说是:屏幕分辨率>=显示分辨率

3、屏幕密度(ppi)

⼜称屏幕像素密度,是指屏幕上每英⼨⾥包含的物理像素点个数,单位是:ppi(pixels per inch) ppi值才是真正衡量⼀块屏幕是否清晰的核⼼指标

PPI的计算⽅法是:PPI=开平⽅(X*X+Y*Y)/Z (其中X,Y指长,宽像素数,Z指屏幕⼤⼩)。 例如iphone4s分辨率为640*960,屏幕⼤⼩为3.5英⼨,它的PPI=开平⽅(960*960+640*640)/3.5=329.650

(⼆)、像素相关

2、css像素

⼜称:逻辑像素,css像素是⼀个抽象的⻓度单位,单位也是px,它是为web开发者创造的,⽤来精确 的度量web⻚⾯上的内容的⼤⼩,我们在编写css,js,less中所⽤的都是css像素(可以理解为:‘程序 员像素’) 思考:代码中的css像素跟物理像素的⽐? 他们两个在2010年之前是⼀样,之后就不⼀样

3、设备独⽴像素

设备独⽴像素简称DIP或DP,⼜称屏幕密度⽆关像素

引⾔:在没有出现⾼清屏的年代,1个css像素对应1个物理像素,但⾃从⾼清屏问世,⼆者就不再是1对 1的关系了

苹果公司,在2010年推出了⼀种新的显示标准:在屏幕尺⼨不变的前提下,把更多的物理像素点压缩 ⾄⼀块屏幕⾥,这样分辨率会更⾼,显示效果会更加细腻,苹果将这种屏幕成为:Retina屏幕(视⽹ 膜屏幕),与此同时推出配备这种屏幕的划时代产品-iPhone4 设备独⽴像素的出现,使得即使在【⾼清屏】下,例如苹果的retina屏,也可以让元素有正常的尺⼨, 让代码不受到设备的影响,它是设备⼚商根据屏幕特性设置的,⽆法更改

设备独⽴像素于物理像素关系 普通屏幕下1个设备独⽴像素对应1个物理像素

⾼清屏幕下1个设备独⽴像素对应N个物理像素

设备独⽴像素与css像素关系 在⽆法缩放的情况下(标准情况下):1css像素=1设备独⽴像素,即:dpr=物理像素/设备独⽴像素

4、像素⽐

像素⽐(dpr):单⼀⽅向设备【物理像素】和【设备独⽴像素】的⽐例

5、像素之间的关系

在不考虑缩放的情况下(理想状态下):

普通屏(dpr=1):1css像素=1设备独⽴像素=1物理像素

⾼清屏(dpr=2):1css像素=1设备独⽴像素=2物理像素

⾼清屏(dpr=3):1css像素=1设备独⽴像素=3物理像素 程序员写了⼀个width为100px的盒⼦,

那么: 代表100个css像素; 若⽤户不进⾏缩放,则对应100个设备独⽴像素;

在dpr为2的设备上,这100个css像素占据了100*2=200个物理像素(横向)

例如:iPhone6为例 物理像素:750px, 设备独⽴像素375px, css像素:375px

(三)、图⽚⾼清显示

1、位图像素

位图:⼜称点阵图像或珊格图像,是由n个像素点组成的。放⼤后会失真。(常⻅⼜:png,                           jpeg, jpg、gif)

             ⼀般使⽤:PS等软件进⾏编辑

               位图像素也是⼀个⻓度单位,  位图像素可以理解为位图中的⼀个‘⼩格⼦ʼ,是位图的最                           ⼩单元

(四)、视⼝概念

视⼝(viewport)就是浏览器显示⻚⾯内容的屏幕区域

PC端视⼝:在pc端,视⼝的默认宽度和浏览器窗⼝的宽度⼀致,在css标准⽂档中,pc端视⼝也被称为:初始 包含块。

移动端视⼝:移动端视⼝可以分为布局视⼝、视觉视⼝、理想视⼝(完美视⼝)标准

1、布局视⼝:默认的布局视⼝容器是980px,对pc⻚⾯进⾏压缩,压到跟⼿机⼀样⼤⼩,就可以看了,只是元素看上去很⼩,只能 ⼿动去缩放,体验效果不好

2、视觉视⼝:视觉视⼝就是⽤户可⻅的区域,它的绝对宽度永远和设备屏幕⼀样宽,但这个宽度⾥包含的css像素值是变化的 例如:⼀般⼿机将980个css像素放⼊视觉视⼝中

注意:布局视⼝经过压缩后,横向的宽度⽤css像素表达,就不再是375px,⽽是980px

(五)、meta标签设置

<!-- 设置完美视⼝⼤⼩ 
2 device-width 视⼝宽度和设备保持⼀致
3 initial-scale 表示⻚⾯的初始缩放值,==>屏幕宽度(设备独⽴像素)/布局视⼝宽度
4 user-scalable 是否允许⽤户缩放
5 maxinum-scale=1.0, 最⼤允许缩放⽐例
6 mininum-scale=1.0, 最⼩允许缩放⽐例
7 -->
8 <meta name="viewport"
9 content="width=device-width,
10 initial-scale=1.0,
11 user-scalable=no
12 maxinum-scale=1.0,
13 mininum-scale=1.0 " />

(六)、多倍图的概念

咱们已经知道,在移动端⾥,1个css像素==多个物理像素,那么对于开发来说,有什么影响呢? 问题:图⽚也是有分辨率的概念的,分辨率指的是物理像素还是px像素呢? 图⽚的分辨率:指的是图⽚在⽔平垂直⽅向需要显示多少个物理像素(发光⼩点)

⼀倍图: 使⽤的是100*100的图⽚ 100*100分辨率图⽚==》对应屏幕中100*100的发光点(物理像素)==》对应css中50*50px 此时强⾏设置100*100px,很明显对⽐起来就较为模糊

⼆倍图 使⽤200*200的图⽚ 200*200分辨率的图⽚==》对应屏幕200*200的发光点(物理像素)==》css中100*100px 此时设置为100*100px,正好完美对应显示

结论: 在现在移动端中,例如:在iphone6中,需要显示多少px的图⽚,为了不被强⾏放⼤, 需要使⽤宽⾼ 为2被分辨率的图⽚,显示更好的效果。 ⽽这种使⽤的宽⾼为2倍分辨率⼤⼩的图⽚,称之为2倍图 实际开发过程中还存在2倍图、3倍图、4倍图之类的,但是具体使⽤哪⼀种看公司具体的需要

命名特点:

二倍图 xxxx@2x.png

三倍图 xxxx@3x.png

在实际开发中如果给的是1倍图,那就多⼤写多⼤;如果是2倍图,那就是图⽚的⼤⼩/2 ;3倍图,就 是图⽚的⼤⼩/3······;

(七)、移动端 运⾏在移动设备上的产品

移动设备:⼿机 、平板 ipad

我们以后做的产品⼤部分都只需要适配ios系统和安卓系统即可

响应式: 在不同的设备上都能给⽤户再好的体验

响应式开发: 随着移动互联⽹的兴起,不同设备的分辨率相差⽐较⼤,如果在不同设备上显示同⼀个⻚⾯,则⽤户 体验差。

响应式⻚⾯设计是⼀种⽅法,使得⼀个⽹站能够兼容多个终端,⽽不⽤为每个终端制作特定的版本。 它使⼀个⽹站在任何类型的屏幕上,都能被轻松浏览使⽤,采⽤响应式设计,在不同设备中,⽹站会 重新排列 展现出不同的设计⻛格,以完美的适配任何尺⼨的屏幕

响应式设计原则: 

渐近增强 基本需求==>更好体验

优雅降级 完备功能==>向下兼容

移动优先的响应式布局采⽤的是渐进增强原则

⼆、移动端开发选择

由于移动端设备的屏幕尺⼨⼤⼩不⼀,会出现:同⼀个元素,在两个不同的⼿机上显示效果不⼀样 (⽐例不同)。要想让同⼀个元素在不同设备上,显示效果⼀样,就需要适配,⽆论采⽤何种适配⽅ 式,中⼼原则永远是等⽐

(⼀)、移动端主流适配⽅案

1、单独制作移动端⻚⾯

为了在特定的设备上显示最好的视觉效果,⼤多的移动端产品都有PC端,和移动端两套不⼀样的⽹ 站。

其技术实现通常为:服务器根据浏览器请求的user-agent判断设备类型,然后返回(或重定向)对应 的站点内容。

2、响应式⻚⾯兼容移动端

常⻅于PC、移动等多端共⽤⼀套代码的场景,⽐如bootstrap站点、三星⼿机官⽹ 通过判断屏幕宽度来改变样式,以适应不同终端 缺点:制作麻烦,需要花费很⼤的精⼒去调兼容性的问题

(⼆)、移动端开发⼏个注意点

1、去除默认样式,可以⽤normalize.css

2、盒⼦模型采⽤box-sizing的属性,border-box属性值

3、超链接点击⾼亮背景的效果需要去除

-webkit-tap-highlight-color:transparent

三、移动端常⻅实现⽅式

(⼀)、移动端的技术选型

1、单独制作移动端⻚⾯

1>流式布局.

就是百分⽐布局,也称为⾮固定像素布局

通过盒⼦的宽度设置成百分⽐来根据屏幕的宽度来进⾏伸缩,不受固定像素的限制,内容向两侧填 充,主要是设置宽度

⼀般配合以下属性使⽤,免得盒⼦⾥⾯的元素,被挤下来

max-width 最⼤宽度(max-height最⼤⾼度)

min-width 最⼩宽度(min-height 最⼩⾼度)

2>、flex弹性布局

3>、rem+媒体查询布局

(1)、rem单位:相对单位,相对于html根元素的字体⼤⼩,通过更改html⽂字的⼤⼩,改变⻚⾯的 ⼤⼩

(2)、媒体查询(meidia Query):

作用:

使⽤@media查询,可以针对不同的媒体类型定义不同的样式

@media可以针对不同的屏幕尺⼨设置不同的样式

当重制浏览器⼤⼩的过程中,⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯

语法:

@media 媒体类型 关键字 (媒体特性){css}

媒体类型(可以同时⽤多个媒体类型,⽤逗号隔开,这样他们之间就是或的关系)

all 所有设备

print 打印设备或打印预览

screen 带屏幕的设备(电脑,⼿机)

speech 屏幕阅读器

关键字 and not only 来连接

      将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件

and:可以将多个媒体特性连接到⼀起,相当于且的意思

not:排除某个媒体类型,相当于“⾮”的意思,可以省略

only:指定某个特定的媒体类型,可以省略

媒体特性(必须要有⼩括号)

width ⻚⾯可⻅宽度 max-width 视⼝的最⼤宽度(视⼝⼩于指定宽度时就⽣效,⼩于等于xxxpx)

min-width 视⼝的最⼩宽度(视⼝⼤于指定宽度时就⽣效)

max-height 最⼤⾼度 min-height 最⼩⾼度 orientation:landscape 横屏 orientation:portrait 竖屏

<style>
2 body {
3 background-color: red;
4 }
5 /* 第⼀种⽅式 直接引⼊ */
6 /* 在992px-768px之间设置的样式 */
按照设计稿与设备宽度的⽐例,动态计算并设置html根标签的font-size⼤⼩(媒体查询)
css中,设计稿元素的宽、⾼、相对位置等取值,按照同等⽐例换算为rem为单位的值
根字体=(⼿机横向设备独⽴像素值)/10 例如:iPhone6,根字体=375/10=37.5px 以rem为单位,
即1rem=37.5px
如果设计稿是375px 例如:iPhone6,根字体=375/10=37.5px 以rem为单位,即1rem=37.5px
⻚⾯中数值为:设计值/(设计稿宽度/10) 例如:100px/(375px/10)=2.667rem
⼿机横向设备独⽴像素值,可以⽤flexible.js计算,⽤⾥⾯的js去做处理
css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)
只要确定当前html⽂字⼤⼩就可以了.
7 @media screen and (max-width: 992px) and (min-width: 768px) {
8 body {
9 background-color: orange;
10 }
11 }
12 /* 可以简写,默认写了screen and */
13 @media (max-width: 768px) {
14 body {
15 background-color: yellowgreen;
16 }
17 }
18 </style>
 <!-- 第⼆种⽅式:外接式,针对不同的界⾯效果,可以写不同的样式,分别引⼊,写的时候,最好从⼩
到⼤来写
19
20 语法:media="媒体类型 关键字 (媒体特性)
21 -->
 <link rel="stylesheet" href="./600.css" media="screen and (max-width:
600px) " />

(3)、rem适配⽅案

按照设计稿与设备宽度的⽐例,动态计算并设置html根标签的font-size⼤⼩(媒体查询) css中,设计稿元素的宽、⾼、相对位置等取值,按照同等⽐例换算为rem为单位的值 根字体=(⼿机横向设备独⽴像素值)/10 例如:iPhone6,根字体=375/10=37.5px 以rem为单位, 即1rem=37.5px

(4)、flexible.js实现

下载地址:

github地址:https://github.com/amfe/lib-flexible

官⽅⽂档地址:https://github.com/amfe/article/issues/17

配合使⽤的插件(vscode中直接安装)

px to rem & rpx & vw (cssrem)
Cssrem: Root Font Size
基准font-size(单位:`px`), default: 16,调整成75
例如主流设计稿⼤⼩为750px,主要将html⽂字的⼤⼩设置为75px,⾥⾯⻚⾯元素rem值:⻚⾯元素的px
值/75,从⽽算出rem值

4>、混合布局(主流)

综上所有,⼀起使⽤,选取⼀种主要技术选型,其他技术为辅助(推荐)

移动端开发的步骤

第⼀步:拿到多⼤的设计稿,将root font size 改成 :设计稿的⼤⼩/10

第⼆步:引⼊flexable.js ,动态的去修改html的字体⼤⼩ 第三步:正常根据设计稿的⼤⼩去开发,将所有的px值换算为rem的值

5>、vw、vh(未来的趋势)

vw也是百分⽐,只不过这个百分⽐只参考设备视⼝

vw(Viewport‘s width):1vw等于视⼝宽度的1%

vh(Viewport’s height):1vh等于视⼝⾼度的1%

vmin:vw和vh中的较⼩值 vmax:选取vw和vh中的最⼤值

总结:

虽然还是vw布局,但还是⽤rem去写

1、⽆关屏幕的⼤⼩,反正100vw,就是屏幕的100%,⽤屏幕的⼤⼩作为固定值去换算相对单位

2、⾃定义⼀个rem跟px之间的换算⽐值,为了好算⼀般是1rem=100px,计算出vw跟rem,px之间的关系 例如750的设计稿:1font-size=100px=1rem=13.3333vw

3、后⾯750设计稿上的所有尺⼨都⽤rem来算。例如200px*200px的盒⼦,就是2rem*2rem的盒⼦,也就是 26.666vw*26.666vw的盒⼦。

⽤vw去开发

1、看设计稿是多⼤,⾃定义1rem=100px, 然后1px=xxxvw, 将html{font-size:xxxvw}

2、去更改root font size ,更改1rem=100px

3、正常将px值写成rem

总结: 都是⼀个绝对值为参考值 flexable.js是以设备独⽴像素为绝对值,去算rem的值 vw是设备的视⼝的宽度为绝对值,去算rem的值 最终都是把设计稿中的px换算成rem

bootstarp框架:https://www.bootcss.com/



总结

本文总结了移动端的一些概念,移动端开发的几个注意点,还有移动端常⻅的几种实现⽅式,写的不好,请多指教,最后祝屏幕前的你,生活愉快,万事如意呀~~~

今天的文章移动端开发(学好移动端这一篇就够啦)分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23932.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注