移动端

Posted xiaotaiyangye

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端相关的知识,希望对你有一定的参考价值。

移动布局:

  1,移动设备 手机和ipad

    安卓系统ios系统

    安卓系统 内置浏览器是谷歌,iOS内置safari浏览器,他们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和iOS的区别

  2,布局

    设备宽度···设备的实际大小,设备的分辨率···厂家给的

    页面的大小···设计稿上的大小

    浏览器的视口···浏览器自带的 通过document.documentElement.clientwidth 查看在移动设备上如果不做处理一般默认980

    例子----

      设备宽320 ,页面的宽1200 ,浏览器的视口980px   三种不统一,我们用移动端看页面,浏览器的视口会自动缩小,以100%完整展示页面,就会变得模糊不清,特别挤

      我们需要把这三个变得统一:

      1,移动设备宽(320)和浏览器视口宽(980)变得一致

        在head之间加一个meta标签name=‘viewport’

        设备宽度和浏览器视口一致时,如果页面宽大于这个数字,就会出现滚动条

        var meta=document.createElement(‘meta‘)

        meta.name=‘viewport‘;

        meta.content=‘width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no‘;

        document.head.appendChild(meta)

      2,当移动设备和浏览器视口一致时,如果你还用传统开发,如果页面超过设备宽,超过的部分会被截掉

        不能用传统的页面开发模式

        a)弹性布局

        b)流式布局(百分百布局)···相对父级

        c)响应式布局

        d)rem布局

   弹性布局----

      1,分两部分---弹性父级,弹性子元素

      2,给父级设置display:flex或inline-flex   *弹性子元素通常在弹性盒子内一行显示

        flex-direction 属性  指定了弹性子元素在父容器中的位置

            row:

              横向从左到右排列(左对齐),默认的排列方式

            row-reverse:

              反转横向排列(右对齐,从后往前排,最后一项排在最前面)

            column:

              纵向排列

            column-reverse:

              反转纵向排列,从后往前排,最后一项排在最上面

        justify-content  属性  内容对齐

            flex-start:

              弹性项目向行头紧挨着填充

            flex-end:

              弹性项目向行尾紧挨着填充

            center:

              弹性项目居中紧挨着填充

            space-between:

              弹性项目平均分布在该行上

            space-around:

              弹性项目平均分布在该行上,两边留有一半的空间间隔

        align-items 属性  设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式

            flex-start:

              弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

            flex-end:

              弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

            center:

              弹性盒子元素在该行的侧轴(纵轴)上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)

            baseline:

              如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start‘等效。其它情况下,该值将参与基线对齐。  

            stretch:如果指定侧轴大小的属性值为‘auto‘,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

        flex-wrap 属性  用于指定弹性盒子的子元素换行方式。

            nowrap - 默认,

               弹性容器为单行。该情况下弹性子项可能会溢出容器。

            wrap - 弹性容器为多行。

                该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行

            wrap-reverse -反转 wrap 排列。

 

      

 

以上是关于移动端的主要内容,如果未能解决你的问题,请参考以下文章

为啥vue适合移动端开发呢?

1移动端 2后台 3 移动端,Web 端 4 PC端

移动端事件

二.移动端组件库

vue-移动端日历插件

jeecg移动开发能力表单移动开发能力,提供多套表单模板(移动端PC端),支持自定义