zoukankan      html  css  js  c++  java
  • 移动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标签 :
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
         maximum-scale=1.0, minimum-scale=1.0">
    

      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设置它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文件)

        <link rel="stylesheet" href="s320.css" media="screen and (max-width : 639px)">

        <link rel="stylesheet" href="s640.css" media="screen and (min-width : 640px)">

      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- 750px){

                    html{ font-size: 75px; }

                 }

        
    八、bootstrap的栅格系统

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

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        //兼容html5和媒体查询

        <!--[if lt IE 9]>

          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">

          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">

        <![endif--]

      2、bootstrap预定义了 .container类

      (1)、响应式布局的容器,固定宽度,将内容划分成12份

      (2)、定义了左右15px的内边距,在定义 .col外加上 .row 就不会有15内边距

      (3)、大屏(screen >=1200px)宽为1170px     .col-lg-*

           中屏(screen >=992px)宽为970px     .col-md-*

           小屏(screen >=768px)宽为750px     .col-sm-*

           超小屏(screen <768px)宽为100%px     .col-xs-*

      (4)、假设我现在需要最大宽度为1280时,用媒体查询定义

          @media screen and (min-width : 1280px){

            body{ "1280px"; }

          }

      3、预定义了 .container-fluid类

      (1)、运用流式布局,用百分百宽度,适合单独做移动端开发

      4、列偏移

      .col-md-offset-*     //可以将列向右偏移

      

      5、列排序  (比如想讲后面的列排到前面)

      .col-md-push-*   //推,往右推几份

      .col-md-pull-*  //拉,往左拉几份

      6、响应式工具

      根据屏幕的大小,对某些元素进行隐藏

      .hidden-xs     ——>  超小屏幕时隐藏

      .hidden-sm   ——>  小屏幕时隐藏

      .hidden-md  ——>  中屏幕时隐藏

      .hidden-lg    ——>  大屏幕时隐藏

      注:.visible-....与之相反

         

  • 相关阅读:
    【alpha】Scrum站立会议第2次....10.17
    【alpha】Scrum站立会议第1次····10.16
    【week4】技术随笔psp
    【week4】课堂Scrum站立会议
    【week3】psp (技术随笔)
    【week3】四则运算 单元测试
    【week3】词频统计 单元测试
    Oracle Split字符串

    指针函数与指针数组
  • 原文地址:https://www.cnblogs.com/hxblogs/p/13334318.html
Copyright © 2011-2022 走看看