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

视口viewport

  1.    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
  2.  
  3.     <script>
  4.         console.log(window.innerWidth);//窗口文档显示区宽度
  5.         console.log(document.documentElement.clientWidth);//浏览器窗口文档显示区域的宽度，不包括滚动条
  6.         console.log(document.documentElement.getBoundingClientRect().width);//这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
  7.         // getBoundingClientRect().top
  8.         // getBoundingClientRect().right
  9.         // getBoundingClientRect().bottom
  10.         // getBoundingClientRect().left
  11.  
  12.         var viewWidth = document.documentElement.clientWidth || window.innerWidth;
  13.  
  14.         // 兼容性问题，不要用
  15.         // console.log(screen.width);
  16.  
  17.         // dpr
  18.         console.log(window.devicePixelRatio);
  19.     </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/

  1.     <style>
  2.         .iconfont {
  3.             font-size: 100px;
  4.             color: red;
  5.         }
  6.         .icon-personal {
  7.             color: green;
  8.             font-size: 50px;
  9.         }
  10.     </style>
  11.     -----------------------
  12.     <body>
  13.         <i class="iconfont icon-scan"></i>
  14.         <i class="iconfont icon-backtop"></i>
  15.         <i class="iconfont icon-personal"></i>
  16.     </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

  1.         @media (min-width: 900px) {
  2.             body {
  3.                 background-color: red;
  4.             }
  5.         }
  6.         @media screen and (min-width: 900px) {
  7.             body {
  8.                 background-color: red;
  9.             }
  10.         }

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

  1.         @media screen and (min-width: 900px) and (max-width: 1024px) {
  2.             body {
  3.                 background-color: red;
  4.             }
  5.         }

媒体特征表达式
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 视口的宽高比

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  6.     <title>3.8 媒体查询--策略</title>
  7.     <style>
  8.         /*css reset*/
  9.         * {
  10.             box-sizing: border-box;
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.         body {
  15.             padding-top: 200px;
  16.         }
  17.         img {
  18.             width: 100%;
  19.             height: 100%;
  20.         }
  21.         .row {
  22.             width: 100%;
  23.             display: flex;
  24.             flex-wrap: wrap;
  25.         }
  26.         .col {
  27.             padding-top: 10px;
  28.             padding-bottom: 10px;
  29.             background-color: rgba(86, 61, 124, 0.15);
  30.             border: 1px solid rgba(86, 61, 124, 0.2);
  31.         }
  32.  
  33.         /*
  34.             断点
  35.                 xs: < 576px
  36.                 sm: 576px ~ 768px
  37.                 md: 768px ~ 992px
  38.                 lg: 992px ~ 1200px
  39.                 xl: > 1200px
  40.         */
  41.         /*mobile first*/
  42.         .col {
  43.             width: 100%;
  44.         }
  45.         @media (min-width: 576px) {
  46.             .col {
  47.                 width: 50%;
  48.             }
  49.         }
  50.         @media (min-width: 768px) {
  51.             .col {
  52.                 width: 25%;
  53.             }
  54.         }
  55.         @media (min-width: 992px) {
  56.             .col {
  57.                 width: 16.6666666667%;
  58.             }
  59.         }
  60.         @media (min-width: 1200px) {
  61.             .col {
  62.                 width: 8.33333333%;
  63.             }
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div class="row">
  69.         <div class="col">
  70.             <img src="img/3.8-1.png" alt="">
  71.         </div>
  72.         <div class="col">
  73.             <img src="img/3.8-1.png" alt="">
  74.         </div>
  75.         <div class="col">
  76.             <img src="img/3.8-1.png" alt="">
  77.         </div>
  78.         <div class="col">
  79.             <img src="img/3.8-1.png" alt="">
  80.         </div>
  81.         <div class="col">
  82.             <img src="img/3.8-1.png" alt="">
  83.         </div>
  84.         <div class="col">
  85.             <img src="img/3.8-1.png" alt="">
  86.         </div>
  87.         <div class="col">
  88.             <img src="img/3.8-1.png" alt="">
  89.         </div>
  90.         <div class="col">
  91.             <img src="img/3.8-1.png" alt="">
  92.         </div>
  93.         <div class="col">
  94.             <img src="img/3.8-1.png" alt="">
  95.         </div>
  96.         <div class="col">
  97.             <img src="img/3.8-1.png" alt="">
  98.         </div>
  99.         <div class="col">
  100.             <img src="img/3.8-1.png" alt="">
  101.         </div>
  102.         <div class="col">
  103.             <img src="img/3.8-1.png" alt="">
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>

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

移动端底部导航案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  6.     <title>移动端底部导航</title>
  7.     <link rel="stylesheet" href="css/iconfont.css">
  8.     <style>
  9.         /*css reset*/
  10.             * {
  11.                 box-sizing: border-box;
  12.                 padding: 0;
  13.                 margin: 0;
  14.             }
  15.             body {
  16.                 background-color: #e2e2e2;
  17.                 color: #595B66;
  18.             }
  19.             a {
  20.                 font-size: 12px;
  21.                 color: #686868;
  22.                 text-decoration: none;
  23.             }
  24.             li {
  25.                 list-style: none;
  26.             }
  27.         /*base css*/
  28.         html {
  29.             font-size: 12px;
  30.         }
  31.         .tabbar-container {
  32.             position: fixed;
  33.             left: 0;
  34.             bottom: 0;
  35.             z-index: 1000;
  36.             width: 100%;
  37.             background-color: #fff;
  38.             box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);
  39.             height: 2.5rem;
  40.         }
  41.         .tabbar-link .iconfont {
  42.             font-size: 1.2rem;
  43.         }
  44.         .tabbar,
  45.         .tabbar-item,
  46.         .tabbar-link {
  47.             height: 100%;
  48.         }
  49.         .tabbar {
  50.             display: flex;
  51.         }
  52.         .tabbar-item {
  53.             flex: 1;
  54.         }
  55.         .tabbar-link {
  56.             display: flex;
  57.             flex-direction: column;
  58.             justify-content: center;
  59.             align-items: center;
  60.  
  61.             font-size: 0.6rem;
  62.         }
  63.         .tabbar-item-active .tabbar-link {
  64.             color: #de181b;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="tabbar-container">
  70.         <ul class="tabbar">
  71.             <li class="tabbar-item tabbar-item-active">
  72.                 <a href="###" class="tabbar-link">
  73.                     <i class="iconfont icon-home"></i>
  74.                     <span>首页</span>
  75.                 </a>
  76.             </li>
  77.             <li class="tabbar-item">
  78.                 <a href="###" class="tabbar-link">
  79.                     <i class="iconfont icon-category"></i>
  80.                     <span>分类页</span>
  81.                 </a>
  82.             </li>
  83.             <li class="tabbar-item">
  84.                 <a href="###" class="tabbar-link">
  85.                     <i class="iconfont icon-cart"></i>
  86.                     <span>购物车</span>
  87.                 </a>
  88.             </li>
  89.             <li class="tabbar-item">
  90.                 <a href="###" class="tabbar-link">
  91.                     <i class="iconfont icon-personal"></i>
  92.                     <span>个人中心</span>
  93.                 </a>
  94.             </li>
  95.         </ul>
  96.     </div>
  97.  
  98.     <script>
  99.         setRemUnit();
  100.  
  101.         window.onresize = setRemUnit;
  102.  
  103.         function setRemUnit() {
  104.             var docEl = document.documentElement;
  105.             var viewWidth = docEl.clientWidth;
  106.  
  107.             docEl.style.fontSize = viewWidth / 375 * 20 + 'px';
  108.         }
  109.     </script>
  110. </body>
  111. </html>

移动Web开发-WebApp（flex布局+移动端导航案例）的更多相关文章

  1. 前端开发笔记--flex布局

    flex布局: 个人觉得flex布局比起传统布局要优先得多(主要是容易使用),缺点是IE10及以上版本才能使用,甚至某些属性只有在IE11才能使用(而且我发现凡是不兼容主要IE的坑来的多,不是说其他浏 ...

  2. web开发：定位布局

    一.盒子的显隐 二.小米topbar 三.相对定位 四.决定定位 五.固定定位 六.z-index属性 七.流式布局思想 八.hover父子悬浮 一.盒子的显隐 1.同一结构下, 如果采用浮动布局,所 ...

  3. Windows App开发之应用布局与基本导航

    简单演示样例看页面布局和导航 首先依照上一篇博客中的顺序来新建一个项目.新建好之后就点开MainPage.xaml開始写程序了. <Grid Background="{ThemeRes ...

  4. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  5. 移动web开发之布局

    移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,Q ...

  6. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

  7. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  8. 移动web开发适配方案之Rem

    移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...

  9. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

随机推荐

  1. CCF_201604-3_路径解析

    没有用stack来写,直接用了字符串和指针,过程有点复杂的.首先对读入的每一个路径,判断它是绝对路径或者相对路径,然后确定起始的路径,然后继续一位位的判断,"//","/ ...

  2. HDU_1176_DP

    http://acm.hdu.edu.cn/showproblem.php?pid=1176 简单dp,转换后跟上一题数塔一样,注意每秒只能移动一格,还有在边缘的情况. #include<ios ...

  3. 《Python学习手册 第五版》 -第2章 Python如何运行程序

    第二章主要讲解了Python的运行机制, 在开始之前,需要明确以下几点 因为<Python学习手册>这本书是面向市场很多人的,既然有很多人,就有很多不一样的需求和使用情况,这本书涵盖Pyt ...

  4. sqlserver install on linux chapter two

    The previous chapter is tell us how to install sqlerver on linuix Today, we will see how to make it ...

  5. Go语言实现：【剑指offer】二叉树的深度

    该题目来源于牛客网<剑指offer>专题. 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. Go语言实现: /** ...

  6. 01-Maven

    今日知识 1. Maven 2. 依赖管理 2. 项目构建 Maven 1. Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 2. Ma ...

  7. shell脚本 inotify + rsync 同步脚本

    1.这是很简单的一个 文件监控+触发同步脚本 监控一台服务器下的一个文件夹,发生改变则向另一个个文件夹进行同步. 具体的inotify命令  rsync命令  可以看linux分类下的介绍 inoti ...

  8. [Redis-CentOS7]Redis设置连接密码(九)

    设置Redis密码 修改/etc/redis.conf 一定要强密码redis为内存存储 抗暴力破解强 requirepass password 重启服务 systemctl restart redi ...

  9. jps jmap 的使用

    第一部分: 源代码: public class ObjectText { int a=0; public static void main(String[] args) { ObjectText ot ...

  10. Ubuntu18.04-Java8安装

    添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 安装oracle-java-installer sudo ...