zoukankan      html  css  js  c++  java
  • 有关移动端适配的问题

    移动端适配这一块,

    有好多种方案。

    viewport + rem:

    viewport + vw

    js动态设置: 参考文章 http://caibaojian.com/flexible-js.html

    一般来说,用下面的这个viewport:

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

    width=device-width:设置布局视口的大小等于设备独立像素;

    initial-scale=1.0:设置布局视口和视觉视口的大小等于设备独立像素;

    user-scalable=no:不允许用户进行缩放;

    minimum-scale和maximum-scale 

    分别这只最小的缩放为1.0,最大的缩放为1.0,表示不允许用户进行缩放操作。

    但是有几个原则要考虑一下: 字体使用px 限制根元素的大小 使用sass中的function做到单位变换

    参考资料:

              浅谈移动端三大viewport https://www.cnblogs.com/ssh-007/p/7196748.html

              移动端适配问题https://www.kancloud.cn/xiaomingjun/interview/909768

        flexible.js 布局详解http://caibaojian.com/flexible-js.html

        amfe-flexible         https://github.com/amfe/lib-flexible?utm_source=caibaojian.com

  • 相关阅读:
    CSS3 @media 查询(制作响应式布局)
    seajs学习
    LABjs、RequireJS、SeaJS 区别
    jquery知识简单运用
    jquery拖拽
    选项卡简单版
    手风琴,回到顶部,无限运动
    分步运动
    多图片放大显示
    测试定时器、获取字符串的字节长度
  • 原文地址:https://www.cnblogs.com/whdaichengxu/p/12452767.html
Copyright © 2011-2022 走看看