移动Web开发-WebAppflex布局+移动端导航案例

实际开发中的像素:css像素
设备像素比dpr=设备像素/css像素
标清屏dpr=1 高清屏dpr=2
缩放改变的是css像素大小
PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/屏幕对角线长度(单位英寸)

 

视口viewport

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    
    <script>
        console.log(window.innerWidth);//窗口文档显示区宽度
        console.log(document.documentElement.clientWidth);浏览器窗口文档显示区域的宽度,不包括滚动条
        console.log(document.documentElement.getBoundingClientRect().width);这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
         getBoundingClientRect().top
         getBoundingClientRect().right
         getBoundingClientRect().bottom
         getBoundingClientRect().left

        var viewWidth = document.documentElement.clientWidth || window.innerWidth;

         兼容性问题,不要用
         console.log(screen.width);

         dpr
        console.log(window.devicePixelRatio);
    </script>

box-sizing: content-box;
width/height代表内容的宽高
box-sizing: border-box;
width/height代表整个盒子的宽高
content-box
盒模型实际宽/高 = width/height + padding + border
border-box
盒模型实际宽/高 = width/height

 

图标字体
阿里巴巴矢量图标库 https://www.iconfont.cn/

    <style>
        .iconfont {
            font-size: 100px;
            color: red;
        }
        .icon-personal {
            color: green;
            font-size: 50px;
        }
    </style>
    -----------------------
    <body>
        <i class="iconfont icon-scan"></i>
        <i class="iconfont icon-backtop"></i>
        <i class="iconfont icon-personal"></i>
    </body>

flex布局(容器属性)

1、display 属性
display: flex; //将对象作为弹性伸缩盒显示
display: inline-flex; //将对象作为内联弹性伸缩盒显示

2、flex-direction 属性
flex-direction: row; //默认主轴为水平方向,起点在左端


flex-direction: row-reverse; //默认主轴为水平方向,起点在右端


flex-direction: column; //主轴为垂直方向,起点在上端


flex-direction: column-reverse; //主轴为垂直方向,起点在下端

3、flex-wrap 属性
  flex-wrap: nowrap; //默认不换行


  flex-wrap: wrap; //换行,从上到下


  flex-wrap: wrap-reverse; //换行,从下到上

4、flex-flow 属性:flex-direction和flex-wrap的简写
flex-flow: row nowrap;
flex-flow: row wrap;

5、justify-content 属性
justify-content: flex-start; //左对齐


justify-content: flex-end; //右对齐


justify-content: center; //居中


justify-content: space-between; //两端对齐,项目之间间隔相等


justify-content: space-around; //每个项目两侧间隔相等,项目之间的间隔比项目与边框的间距大一倍

6、align-items 属性(适用于高度不同的元素同一行排列时)
align-items: flex-start; //起点对齐(顶部对齐)


align-items: flex-end; //终点对齐(底部对齐)


align-items: center; //中点对齐


align-items: baseline; //项目的第一行文字基线对齐


align-items: stretch; //如果项目未设置高度或者是auto,则占满整个容器的高度

7、align-content 属性(单行无效,适用于多行的情况,在整个外容器中垂直方向如何对齐)
align-content: flex-start; //起点对齐(在容器的垂直方向的顶部)


align-content: flex-end; //终点对齐(在容器的垂直方向的底部)


align-content: center; //中点对齐(在容器的垂直居中位置)


align-content: space-between; //与交叉轴两端对齐,轴线之间的间隔平均分布


align-content: space-around; //每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍


align-content: stretch; //(默认值):轴线占满整个交叉轴


flex布局(项目属性)

1、order属性
order: -1; //项目排列顺序,越小越靠前,默认是0

2、flex-grow 属性:定义项目的放大比例
flex-grow: 1; //如果所有都是1,将平分空间
flex-grow: 2; //如果有一项为2,会按比例多占空间


flex-grow: 0; //默认是0,即存在剩余空间也不放大
width:200px; //没有flex-grow属性,只有固定宽度的元素空间固定,其余元素平分剩余可用空间

3、flex-shrink 属性:定义项目的缩小比例
flex-shrink: 1; //所有元素都是1,则空间不足时统一缩小
flex-shrink: 0; //为0的元素不会缩小


flex-shrink: -1; //负值无效

4、flex-basis 属性:在分配多余空间之前,项目占据的主轴空间
flex-basis: auto; //默认为原本空间


flex-basis: 400px;

5、flex 属性:flex-grow/ flex-shrink/ flex-basis的缩写

6、align-self 属性:给单个项目设置不同的对齐方式,默认是auto
align-items: center;
align-self: flex-start;
align-self: flex-end;

媒体查询

媒体类型
all(default)
screen / print / speech

        @media (min-width: 900px) {
            body {
                background-color: red;
            }
        }
        @media screen and (min-color: red;
            }
        }

媒体查询中的逻辑:与( and ) / 或(,) / 非( not )

        @media screen and (min-width: 900px) and (max-width: 1024px) {
            body {
                background-color: red;
            }
        }

媒体特征表达式
width/max-width/min-width
-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
orientation
landscape/portrait

height
device-width/device-height
screen.width/screen.height
aspect-ratio 视口的宽高比

        @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
            body {
                background-color: red;
            }
        }

媒体查询策略:移动端优先

<!DOCTYPE html>
<html lang="zh-CN"head>
    meta charset="UTF-8"name="viewport" content="width=device-width,minimum-scale=1,user-scalable=no"title>3.8 媒体查询--策略</style>
        /*css reset*/
        * {
            box-sizing: border-box;
            padding 0
            margin;
        }
        body 
            padding-top 200px
        img 
            width 100%
            height
        .row 
            display flex
            flex-wrap wrap
        .col  10px
            padding-bottom
            background-color rgba(86,61,124,0.15)
            border 1px solid rgba(86,0.2)}

        
            断点
                xs: < 576px
                sm: 576px ~ 768px
                md: 768px ~ 992px
                lg: 992px ~ 1200px
                xl: > 1200px
        */
        mobile first
        @media (min-width: 576px) 
            .col {
                width 50%;
            
        }
        @media (min-width: 768px)  25%
        }
        @media (min-width: 992px)  16.6666666667%
        }
        @media (min-width: 1200px)  8.33333333%
        }
    bodydiv class="row">
        ="col">
            img src="img/3.8-1.png" alt=""divhtml>

移动端常用单位
px % em rem vw/vh
宽度使用%,高度或者字体大小使用rem

 

移动端底部导航案例

>移动端底部导航link rel="stylesheet" href="css/iconfont.css"
            * 
                box-sizing
                padding
                margin
            body 
                background-color #e2e2e2
                color #595B66
            a 
                font-size 12px #686868
                text-decoration none
            li 
                list-style}
        base css
        html 
            font-size
        .tabbar-container 
            position fixed
            left
            bottom
            z-index 1000 #fff
            box-shadow 0 0 10px 0 rgba(154,141,0.6) 2.5rem
        .tabbar-link .iconfont  1.2rem
        .tabbar,.tabbar-item,.tabbar-link 
        .tabbar 
        .tabbar-item 
            flex 1
        .tabbar-link 
            flex-direction column
            justify-content center
            align-items

            font-size 0.6rem
        .tabbar-item-active .tabbar-link 
            color #de181b}
    ="tabbar-container"ul ="tabbar"li ="tabbar-item tabbar-item-active">
                a href="###" class="tabbar-link">
                    i ="iconfont icon-home"></ispan>首页ali="tabbar-item"="iconfont icon-category">分类页="iconfont icon-cart">购物车="iconfont icon-personal">个人中心ul>

    script>
        setRemUnit();

        window.onresize = setRemUnit;

        function setRemUnit() {
            var docEl  document.documentElement;
             viewWidth  docEl.clientWidth;

            docEl.style.fontSize / 375 * 20 + 'px;
        }
    >

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

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法