自助网站建设系统企业管理软件
一、一些概念
(一)、屏幕相关
1、屏幕大小
指屏幕的对角线长度,单位是英寸(inch)。常用尺寸有:3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等

2、屏幕分辨率
指屏幕在:横向、纵向上所拥有的物理像素点总数,一般表示用n * m表示
- 屏幕分辨率是一个固定值,屏幕生产出来就确定了,无法修改
- 屏幕分辨率、显示分辨率是两个概念,系统设置中可以修改的是显示分辨率
- 显示分辨率是设备当前所用到的物理像素点,也可以说是:屏幕分辨率>=显示分辨率

3、屏幕密度(ppi)
又称屏幕像素密度,是指屏幕上每英寸里包含的物理像素点个数,单位是:ppi(pixels per inch)
例如iphone4s分辨率为640*960,屏幕大小为3.5英寸,它的PPI=开平方(960*960+640*640)/3.5=329.650
(二)、像素相关
1、物理像素
又称:设备像素,物理像素是一个长度单位,单位是px,1个物理像素就是屏幕上的一个物理成像点,就是屏幕中一个微小的发光物理元器件(可简单理解为超级微小的灯泡),是屏幕能显示的最小颗粒,它由屏幕制造商决定,屏幕生产后无法修改。
2、css像素
又称:逻辑像素,css像素是一个抽象的长度单位,单位也是px,它是为web开发者创造的,用来精确的度量web页面上的内容的大小,我们在编写css,js,less中所用的都是css像素(可以理解为:‘程序员像素’)
3、设备独立像素
引言:在没有出现高清屏的年代,1个css像素对应1个物理像素,但自从高清屏问世,二者就不再是1对1的关系了
苹果公司,在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率会更高,显示效果会更加细腻,苹果将这种屏幕成为:Retina屏幕(视网膜屏幕),与此同时推出配备这种屏幕的划时代产品-iPhone4
设备独立像素的出现,使得即使在【高清屏】下,例如苹果的retina屏,也可以让元素有正常的尺寸,让代码不受到设备的影响,它是设备厂商根据屏幕特性设置的,无法更改
在无法缩放的情况下(标准情况下):1css像素=1设备独立像素,即:dpr=物理像素/设备独立像素
4、像素比
像素比(dpr):单一方向设备【物理像素】和【设备独立像素】的比例
5、像素之间的关系
普通屏(dpr=1):1css像素=1设备独立像素=1物理像素 2010之前
高清屏(dpr=2):1css像素=1设备独立像素=2物理像素
高清屏(dpr=3):1css像素=1设备独立像素=3物理像素
在dpr为2的设备上,这100个css像素占据了100*2=200个物理像素(横向)
(三)、图片高清显示
1、位图像素
- n个像素点组成的。放大后会失真。(常见又:png,jpeg,jpg、gif)
- PS等软件进行编辑
- 位图像素可以理解为位图中的一个‘小格子’,是位图的最小单元
- svg)
- AI,Sketch等软件进行编辑
(四)、视口概念
在pc端,视口的默认宽度和浏览器窗口的宽度一致,在css标准文档中,pc端视口也被称为:初始包含块。
移动端视口可以分为布局视口、视觉视口、理想视口(完美视口)标准
1、布局视口
默认的布局视口容器是980px,对pc页面进行压缩,压到跟手机一样大小,就可以看了,只是元素看上去很小,只能手动去缩放,体验效果不好
2、视觉视口
视觉视口就是用户可见的区域,它的绝对宽度永远和设备屏幕一样宽,但这个宽度里包含的css像素值是变化的
注意:布局视口经过压缩后,横向的宽度用css像素表达,就不再是375px,而是980px
- 1、物理像素:750px
- 2、设备独立像素:375px
- 3、css像素:980px
3、理想视口
与屏幕(设备独立像素)等宽的布局视口,称之为理想视口;让布局视口宽度与屏幕等宽(设备独立像素),靠meta标签实现
<meta name='viewport' content='width=device-width' />
(五)、meta标签设置
<!-- 设置完美视口大小 device-width 视口宽度和设备保持一致initial-scale 表示页面的初始缩放值,==>屏幕宽度(设备独立像素)/布局视口宽度user-scalable 是否允许用户缩放maxinum-scale=1.0, 最大允许缩放比例mininum-scale=1.0, 最小允许缩放比例--><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=nomaxinum-scale=1.0,mininum-scale=1.0 " />
(六)、多倍图的概念
咱们已经知道,在移动端里,1个css像素=1个设备独立像素=多个物理像素,那么对于开发来说,有什么影响呢?
问题:图片也是有分辨率的概念的,分辨率指的是物理像素还是css像素呢?
图片的分辨率:指的是图片在水平垂直方向需要显示多少个物理像素(发光小点)
表示图片显示在屏幕中需要用到200*200的物理像素(发光小点)
200css像素*200css像素,也就是在pc端1个css像素=1个物理像素
现在移动端,如果:iphone6,需要写 多少*多少 px?
例子:需求:在移动端iphone6中显示100*100px的盒子,里面装对应的图片
iphone6物理像素宽时750px,设备独立像素时375px,
50*50设备独立像素= 50*50css像素 =100*100物理像素
100*100设备独立像素=100*100css像素=200*200物理像素
100*100分辨率图片==》对应屏幕中100*100的发光点(物理像素)==》对应css中50*50px
此时强行设置100*100px css像素,很明显对比起来就较为模糊
200*200分辨率的图片==》对应屏幕200*200的发光点(物理像素)==》css中100*100px
在现在移动端中,例如:在iphone6中,需要显示多少px的图片,为了不被强行放大, 需要使用宽高为2被分辨率的图片,显示更好的效果。
实际开发过程中还存在2倍图、3倍图、4倍图之类的,但是具体使用哪一种看公司具体的需要
在实际开发中如果给的是1倍图,那就多大写多大;如果是2倍图,那就是图片的大小/2 ;3倍图,就是图片的大小/3······;
(七)、移动端运行在移动设备上的产品
随着移动互联网的兴起,不同设备的分辨率相差比较大,如果在不同设备上显示同一个页面,则用户体验差。
响应式页面设计是一种方法,使得一个网站能够兼容多个终端,而不用为每个终端制作特定的版本。
它使一个网站在任何类型的屏幕上,都能被轻松浏览使用,采用响应式设计,在不同设备中,网站会重新排列
二、移动端开发选择
由于移动端设备的屏幕尺寸大小不一,会出现:同一个元素,在两个不同的手机上显示效果不一样(比例不同)。要想让同一个元素在不同设备上,显示效果一样,就需要适配,无论采用何种适配方式,中心原则永远是等比
(一)、移动端主流适配方案
1、单独制作移动端页面(主流)
为了在特定的设备上显示最好的视觉效果,大多的移动端产品都有PC端,和移动端两套不一样的网站。
其技术实现通常为:服务器根据浏览器请求的user-agent判断设备类型,然后返回(或重定向)对应的站点内容。
2、响应式页面兼容移动端(其次)
常见于PC、移动等多端共用一套代码的场景,比如bootstrap站点、三星手机官网,星巴克官网
(二)、移动端开发几个注意点
1、去除默认样式,可以用normalize.css(默认样式不去除,处理各浏览器对默认样式的不同解析),resize.css(直接把所有的默认样式都去掉,要用,你就自己重设)
2、盒子模型采用box-sizing的属性,border-box属性值
-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):
媒体类型(可以同时用多个媒体类型,用逗号隔开,这样他们之间就是或的关系)
max-width 视口的最大宽度(视口小于指定宽度时就生效,小于等于xxxpx)
min-width 视口的最小宽度(视口大于指定宽度时就生效)
尺寸范围 | ||
超小屏幕 | ||
>=768px~<992px | min-width=768px max-width=992 | |
中型屏幕 | ||
>=1200px |
<style>body {background-color: red;}/* 第一种方式 直接引入 *//* 在992px-768px之间设置的样式 */@media screen and (max-width: 992px) and (min-width: 768px) {body {background-color: orange;}}/* 可以简写,默认写了screen and */@media (max-width: 768px) {body {background-color: yellowgreen;}}</style><!-- 第二种方式:外接式,针对不同的界面效果,可以写不同的样式,分别引入,写的时候,最好从小到大来写语法:media="媒体类型 关键字 (媒体特性)--><link rel="stylesheet" href="./600.css" media="screen and (max-width: 600px) " />
(3)、rem适配方案
按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小(媒体查询)
css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值
根字体=(手机横向设备独立像素值=设计稿css像素值)/10
设计稿元素设计数值转成rem: 设计值/(设计稿宽度/10)
例如:iPhone6,根字体=375/10=37.5px 以rem为单位,即1rem=37.5px
如果设计稿是375px 写一个100px*100px的盒子,用rem来表示 100px/(375px/10)=2.667rem
设计稿是固定的,根据设计稿来开发页面,用rem这个相对单位去根据设计稿设计的大小开发好页面后,再根据不同的手机设备独立像素去更改根标签字体的大小,就可以实现响应式的变化
手机横向设备独立像素值,可以用flexible.js计算,用里面的js去做处理
css元素的设计值换算用css中的Cssrem: Root Font Size去实现
(4)、flexible.js
=css像素)划分为10等份,但不同设备下,比例还是一致的。
github地址:https://github.com/amfe/lib-flexible
官方文档地址:https://github.com/amfe/article/issues/17
基准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(Viewport‘s width):1vw等于视口宽度的1%
vh(Viewport’s height):1vh等于视口高度的1%
(1)、750的设计稿:html{ font-size:13.3333vw }
1vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应的就是750px, 1vw=7.5px 那么1px就是0.13333vw,
同时我们知道另一个单位rem,rem是相对于html元素字体大小,放了方便计算,我们自定义html字体大小为100px,
通过上面的计算结果我们知道1px是0.13333vw,那么100px就是13.333vw了。
这样后面的用rem就很好计算了。13.333vw对应的是100px,然后我们就可以很愉快的写rem单位了,由于自定义的1rem=100px,
如果750的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem
(2)、1080设计稿:html{ font-size:9.259vw }
如果设计稿时1080px,屏幕是100vw,那么对应的1px=0.09259vw,rem根标签依然自定义取100px,那么就是1rem=100px,那么1rem=9.259vw。
如果1080的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem
总结:
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的盒子。
1、看设计稿是多大,自定义1rem=100px, 然后1px=xxxvw, 将html{font-size:xxxvw}
2、去更改root font size ,更改1rem=100px