zoukankan      html  css  js  c++  java
  • 移动端页面的几个注意

    相信大家对移动端页面开发不会太陌生吧,但是它和PC页面之间究竟有什么差别呢?

    1.响应式布局

    所谓响应式布局,核心内容就是media了,它类似与if的写法

    @media (条件){

      /* css语句 */

    }

    举个栗子:

    在屏幕分辨率为320px与980px之间的div会加上background:red的css样式

    @media (max-980px and min-320px){
        div{
            background: red;
        }
    }

    ps:写法类似的如 @supports,CSS3的条件判断就只有2个:

    其一是“@media”规则,主要用来“根据媒体属性区分样式表。
    其二是“@supports”规则,在不支持CSS3的浏览器下实现渐进增强式设计。

    /* 如果浏览器支持display:flex,section加上display:flex和background: red;样式 */
    @supports (display:flex) {
      section { 
        display: flex;
        background: red;
      }
    }    
    
    /* 如果浏览器不支持display:flex,section加上float:left和background: green;样式 */
    @supports not (display:flex) {
      section { 
        float: left;
        background: green;
      }
    }    

    2.media_viewport和rem

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

    相信大家对以上代码并不陌生吧,这是移动端页面必须加的meta,这个对下面的html fontSize的计算有着影响,最常用的conten属性t就上面写这3个,记住这三个基本就行了。

    如果不加上这段meta viewport clientWidth将会被解析成浏览器默认值,例如980px、1024px等,最终会影响到html的font-size计算~~

    说到rem就不得不提及em,em是相对字体大小来定义,例如一个div的font-size:12px 那么它的2em就相当于24px了

    而rem是相对于html标签的font-size,因此我们想要写出一些随着屏幕大小变化而变化的页面(兼容不同分辨率的页面),我们可以考虑用rem这个单位,我们也只需要在每次window.onload的时候计算一下

    window.onload = function(){
        //designWidth/自己喜欢的字体大小 = 846px/100px = 8.46
        //我们采用基准fontSize是100是便于计算,设计稿上的px转化为rem只需要除以100
        document.documentElement.style.fontSize = document.documentElement.clientWidth/8.46 + 'px';
    }

    所以一般我们用 实际设备宽度/(设计稿宽度/100) 来计算出html fontSize的大小,到时候所有的单位大小都安装设计稿的1/100倍来写就ok了,当然我们把100直接换成1理论上也是ok的,这样会更方便,但是这样往往会把HTML fontSize变成0.几px ,别忘了浏览器一般会限制最小的fontSize,例如chrome会把所有小于12px的都定为12px,因此我们不会把1/100换成1。

    ps:有些开发者也喜欢用百分比来定义html fontSize 例如62.5%,绝大部分浏览器默认字体大小都为16px,所以62.5%*16 = 10,化成10px就方便写样式了~

    3.touch事件

    1.单点 

    主要包括touchstart touchmove touchend,当然这是dom3的事件,要兼容的话最好写成事件绑定(addEventListener)的形式为好~~

  • 相关阅读:
    Matlab随笔之三维图形绘制
    Matlab随笔之模拟退火算法
    Matlab随笔之矩阵入门知识
    Matlab随笔之求解线性方程
    Matlab随笔之分段线性函数化为线性规划
    Matlab随笔之指派问题的整数规划
    Matlab随笔之线性规划
    Android单位转换 (px、dp、sp之间的转换工具类)
    Android禁止输入表情符号
    设计模式之策略模式
  • 原文地址:https://www.cnblogs.com/amiezhang/p/7911128.html
Copyright © 2011-2022 走看看