移动WEB开发

一、视口的概念

  • layout viewport(布局视口):在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。js获取布局视口:document.documentElement.clientWidth | document.body.clientWidth
  • visual viewport(视觉视口):用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。js获取视觉视口:window.innerWidth
  • ideal viewport(理想视口):布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。js获取理想视口:window.screen.width
二、视口标签
  理想视口才是我们设计移动web需要的视口,那么如何去设置视口呢?
   用meta标签 :
  

  1、content属性 : 用来设置视口的,width属性就是视口的宽,它可以是任意数字,设为 device-width 表示设备的宽度,这就是我们需要的理想视口,当没有设置时默认会按980px去显示

  2、initial-scale :    视口初始的缩放比,可设置为大于0的数字

  3、user-scalable : 设置是否允许用户进行缩放,可设置为 yes / no 或 1 / 0

  4、maximum-scale : 设置视口的最大缩放比,可设置为大于 0 的数字

  5、minimum-scale :  设置视口的最小缩放比,可设置为大于 0 的数字

三、涉及显示的几个概念
  1、物理像素与CSS像素
  设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。
  CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位,是抽象的,而不是实际存在的。

   2、分辨率(物理像素)
  screen.height //screen.width返回显示设备的信息。
  除非调整显示设备的分辨率,否则看作是常量。

  (显示)分辨率就是屏幕上显示的像素个数,分辨率160×128的意思是水平像素数为160个,垂直像素数128个。

  分辨率越高,像素的数目越多,感应到的图像越精密。

  而在屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。

  以分辨率为1024×768的屏幕来说,即每一条水平线上包含有1024个像素点,共有768条线,即扫描列数为1024列,行数为768行。

  分辨率不仅与显示尺寸有关,还受显像管点距、视频带宽等因素的影响。其中,它和刷新频率的关系比较密切,严格地说,只有当刷新频率为“无闪烁刷新频率”,显示器能达到最高多少分辨率,才能称这个显示器的最高分辨率为多少。

  3、PPI
  pixels per inch所表示的是每英寸所拥有的像素(pixel)数目。

  手机屏幕的PPI当达到一定数值时,人眼就分辨不出颗粒感了。

  这个数值是多少?按照2010年前苹果公司CEO史蒂夫·乔布斯(Steve Jobs)在iPhone 4发布会上对视网膜技术的介绍:“当你所拿的东西距离你10-12英寸(约25-30厘米)时,它的分辨率只要达到300ppi这个‘神奇数字’(每英寸300个像素点)以上,你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。)

  那么,是不是屏幕PPI超过这个数值就没有意义了?
  ==>除PPI之外,还看它的饱和度,渲染度。

  4、DPR设备像素比
  DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值:

  DPR = 设备像素 / CSS像素(某一方向上)
  普通密度桌面显示屏的devicePixelRatio=1
  高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
  主流手机显示屏的devicePixelRatio=2或3

  因为大部分桌面显示器的devicePixelRatio为1,所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
  举个栗子来说,一张100x100的图片,通过CSS设置它width:100px; height:100px; 。在电脑上打开,没有什么问题,但是在手机上打开,屏幕按照逻辑分辨率来渲染,假设手机的devicePixelRatio=3,那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片,你的图片可能因此变得模糊,因为细节不够。所以一般明智的做法是把图片换成300x300的,CSS宽高不变,这样在手机上展示时,CSS宽高换算成物理像素是300x300,你的图片也是300x300,就不会变糊了。

  5、常用移动设备的PPI与DPR

IOS设备  PPI  DPR
iPhone4  326  2
iPhone4s 326  2
iPhone5  326  2
iPhone5s  326  2
iPhone6  326  2
iPhone6s  326  2
iPhone6 PLUS  441  3
iPhone6s PLUS  441  3
iPad  - -  2
iPad  - -  3
android  尺寸  dpr
低清设备  -  1
mx2  800*1280  2.5
小米note  720*1280  2.75
三星note4  4

  6、二倍图

  由于移动设备的物理像素和css单位px是不同的,在文字上的体现差别不大但在图片上可能就会造成模糊,

以iphone6为例,它的物理像素比是2,用css设置一张图片50 * 50的图片,此时在手机上的显示是100 * 100

的分辨率,相当于被拉伸了两倍,图片看起来就很模糊,解决办法是用100 * 100的图,再设置它的宽高为50 * 50。

  背景精灵也是,会把精灵图 * 2,但获取它的background-position时,要先把精灵图 / 2,再去量它的位置 , 然后

设置background-size : 宽 / 2   高 / 2 ;

  注:background-size: cover :  背景拉伸到能覆盖这个容器

    background-size: contain  :  背景拉伸,当宽或高其中有一个铺满,就不再拉伸了

  7、初始化

  做移动端页面时的初始化: 

    (1)设置视口标签

    (2)引入normalize.css(是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一)

    (3)去掉一些移动端的默认模式

      I、移动端的a标签点击会有高亮效果,需要清除,设为 transparent 透明

       html{ -webkit-tap-highlight-color: transparent ; }

      II、移动端浏览器,ios默认有自己的外观需要去掉才能自定义样式

       html{ -webkit-appearance: none ; }

      III、禁止长按页面时弹出菜单

       img,a{ -webkit-touch-callout: none ; }

四、移动开发的技术选型

  1、单独做移动开发

  通常情况下输入网址,会判断是PC端还是移动端打开,移动端打开就在域名前加 m. ,打开移动端的网页

  -- 单独做移动端有下方几个技术方案

  (1)、流式布局(宽度设为百分比的形式)

  (2)、flex弹性布局(推荐)

  (3)、less + rem + 媒体查询 或者 rem + flexible.js (推荐)

  (4)、混合布局(推荐)

  2、响应式布局

  (1)、媒体查询

  (2)、bootstrap

五、flex基本样式

  css3中新增的属性 : display:flex;

  弹性盒布局中有两根轴,主轴和侧轴

  常见的父元素属性

  1、flex-direction : 设置主轴的方向

    (1)、row :  主轴为 X 轴,元素从左往右排列 (默认)

    (2)、row-reverse : 主轴为 X 轴,元素从右往左排列

    (3)、column : 主轴为 Y 轴, 元素从上到下排列

    (4)、column-reverse : 主轴为 Y 轴 ,元素从下到上排列

 

  2、justify-content : 设置主轴上子元素的排列方式(当主轴为X轴时)

    (1)、flex-start : 元素左对齐 (默认,结果与上面的row 相同)

    (2)、flex-end : 元素右对齐(类似float:left, 与上面的row-reverse不同,它不会改变排列方式)

    (3)、center : 元素居中对齐

    (4)、flex-around : 平均分配剩余空间

    (5)、flex-between : 两侧贴边再平均分配剩余空间

  

  3、flex-wrap : 设置子元素是否换行

    (1):nowrap :不换行(默认)

    (2):wrap : 换行

  

  4、align-items : 设置侧轴子元素的排列方式,适合内容为行时使用(当侧轴为Y轴时)

    (1):flex-start : 元素上对齐(默认,结果类似column)

    (2):flex-end : 元素下对齐

    (3):center : 居中

    (4):stretch : 拉伸,内容拉伸到和父级一样高

  5、align-content : 设置侧轴子元素的排列方式,适合内容为行时使用(当侧轴为Y轴时)

     (1):flex-start : 元素上对齐(默认,结果类似column)

    (2):flex-end : 元素下对齐

    (3):center : 居中

     (4)、flex-around : 平均分配剩余空间

    (5)、flex-between : 两侧贴边再平均分配剩余空间

  6、flex-flow : 复合属性,同时设置direction 和 wrap

  

  常见的子项属性

  1、flex : num  :  定义子项目多少份分配剩余空间(默认是0,根据父盒子的剩余空间计算)

  2、align-self  :  设置子项目在侧轴的排列方式,默认继承父级的排列方式

  3、order  :  定义子项目在主轴的排列顺序(默认都是0,数值越小排的越靠前)

  

六、rem + less + 媒体查询

  1、rem基础

  (1)、em : 是相对于父元素的字体大小来定的 

  (2)、rem : (root em)

    rem的基准是相对于html的字体大小(font-size)定的

    如根元素设置font-size为12px,则其他元素设置的2em就等于24px

  (3)、rem的优点就是通过修改html里面的文字大小来改变页面中元素的大小,方便整体控制

 

  2、媒体查询 (Media Query 是css3中的属性)

  (1)、媒体查询可以针对不同屏幕尺寸去设置不同的样式

  (2)、语法规范

    @media mediatype and  not|and|only (media feature){

       CSS(code);

    }

   mediatype : 查询类型

    将不同终端设备划分成不同的类型,称为媒体类型

    all  :  所有类型

    print  :  用于打印机和打印预览

    screen :  用于电脑屏幕,平板电脑,智能手机等

  例如 : @media screen and (min-width : 980px){

        html{ font-size : 50px ; }

      }    //当屏幕宽度大于等于 980px时 

     注: min-width : 表示 大于等于 , max-width : 表示 小于等于

  (3)建议尺寸从小到大写

  (4)引入资源  (如针对不同屏幕大小,调用不同的CSS文件)

    

    

 

  3、less

  less是一门css拓展的语言,css预处理语言

  less中引入另一个less文件 : @import "less文件名,不用加后缀"

  (1)、less编译

    html不能直接解析less文件,需要通过编译转换为css文件

    vscode的应用商店搜索 easy less,安装后在less文件里每次保存都会生成对应的css文件

  (2)、less变量语法

    @变量名 : 值 ;

    注:变量名不能以数字开头,不能用特殊符号,用@前缀,大小写敏感

    例如 : @color : "#ccc";

        css属性中 color : @color ;

  (3)、less嵌套

    I、子元素的样式直接写在父元素里

      如 div{

         a{ color : "#ccc"; }

       }

    II、伪类,伪元素,交集选择等要在内层选择器前加上&

      如 a{

          &:hover{ color : "red"; }

        }

  (4)、less运算

    less中任何数字,颜色或者变量都可以参加运算

    注:加减乘除(运算符号)两侧要有空格

    两个运算数只有一个有单位,结果为这个单位

    如果两个都有单位,以第一个运算数的单位为准

 

  4、如何通过rem+less+媒体查询写移动端页面

  (1)、将屏幕划分成若干等分(这里假设为15等份)

  (2)、利用媒体查询动态设置html里的字体大小

    如:若屏幕大于等于 320px时,font-size为 320px / 15

      若屏幕大于等于540px时,font-size为 540px / 15

      若屏幕大于等于750px时,font-size为 750px / 15

      

  (3)、页面元素的rem值 = 页面元素在750px像素下的px值 / 屏幕为750px的font-size

      得到一个比例

      

七、rem + flexible.js

  1、原理 : 将页面划分成10等份

  2、需要安装一个将px转成rem的插件 ——> cssrem

    它默认html的font-size是16px,需要到setting.json中把它设置为最大屏幕下的font-size

  3、flexible是根据当前屏幕的宽度除以10来计算font-size的,假设我当前需要的最大宽度为750px时,

    就需要加上限定:@media screen and (min-width: 750px){

                html{ font-size: 75px; }

             }

    
八、bootstrap的栅格系统

  1、初始化时需要加上如下

    //以IE最高版本内核进行渲染

    

    //兼容html5和媒体查询

    

你可能感兴趣的:(移动WEB开发)