zoukankan      html  css  js  c++  java
  • 移动端布局

    1.移动设备  手机和ipad

    系统:安卓系统、ios系统

    安卓系统:内置浏览器是谷歌

    ios系统:内置Safari浏览器,他们的内核是webkit,不考虑兼容性,需要考虑的是安卓和ios的区别

    2.布局

    布局考虑:

      设备的实际大小,设备的分辨率,厂家(设计者)给的分辨率

      页面的大小,设计稿上的大小(设计稿上的大小是多大,开发的页面大小就是多大)

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

      eg:设备宽是320px,页面宽是1200px,浏览器视口是980px,三者统一,我们用移动设备看页面,页面的视口会自动缩小,以100%完整的展示页面,但是就会变得不清楚,特别挤,视觉效果极差

      解决:

      需要把这三个变得统一

      (1)移动设备(320)和浏览器视口(980)一致,在head之间加一个meta标签 name=“viewport”

      <meta name="viewport" content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

      (2)当移动设备和浏览器视口一致时,如果还使用以前的布局,如果页面超过设备宽,超过的部分会被截掉,使用不能使用传统的开发模式了

      简单介绍一下弹性布局

      (1)分两部分:弹性父级、弹性子元素

      (2)给父级设置   display:flex或者inline-flex

        flex-direction 属性指定了弹性盒子元素在父容器中的位置
        flex-direction的属性值
        row 横向从左到右排列(左对齐),默认的排列方式
        row-reverse 反向横向排列(右对齐)从后往前排,最后一项排在最前面
        column 纵向排列
        column-reverse 反转纵向排列,从后往前排,最后一项拍在最上面

      

  • 相关阅读:
    深度学习模型参数计算
    keras多输出多输出示例(keras教程一)
    keras可视化报错:OSError: `pydot` failed to call GraphViz.Please install GraphViz问题解决
    git版本管理,git tag
    python封装自己的模块,pip install安装到python环境
    如何理解Virtual DOM
    使用 Hbuilder 连接手机调试移动端项目
    js 常用排序
    博客漂浮的小人
    开发者必备Linux命令
  • 原文地址:https://www.cnblogs.com/panghexin/p/10826868.html
Copyright © 2011-2022 走看看