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

    移动布局

      1,移动设备 手机 和 ipad

        安卓和ios系统

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

      2.布局

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

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

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

          

        例子 设备宽是320页面宽是1200浏览器视口是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.弹性布局

      1.分两部分  弹性父级  弹性子元素

      2.给父级设置display:flex或inline-flex

      flex-direction指定弹性盒子中子元素的排列方式

  • 相关阅读:
    Vue.js监听事件
    Vue.js组件传值
    Vue.js安装
    C#中输入法全角转换半角
    文件夹操作
    转JSON字符串,并进行AES加密
    ReportView报表的使用
    c++读入优化
    快读板子
    【转】2020年 大二上 ACM
  • 原文地址:https://www.cnblogs.com/guhuai/p/10827931.html
Copyright © 2011-2022 走看看