• 移动端项目总结


      

      这次是我第一次的接触到移动端的开发,在开始的迷茫,到最后做到的喜悦,真的是一次很大的收获。本来以为和电脑端的web有很大的区别,然而在做的过程中,发现其实也没有什么很大的区别,就是个视口的问题,也许是我了解的知识太少,目前只知道与这个有关,视口的知识点如下:

    viewport(视口的概念)

    meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

    表示设定一个“虚拟窗口”就是是为了在小小的屏幕下,可以装载很大的页面

    语法:
    <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
    说明:
    width – viewport的宽度,支持数值,或特殊字符“device-width”(设备的可见宽)
    height – viewport的高度
    initial-scale – 初始的缩放比例
    minimum-scale – 允许用户缩放到的最小比例
    maximum-scale – 允许用户缩放到的最大比例
    user-scalable – 用户是否可以手动缩放

    例:

    定义视口的宽为设备宽,初始缩放为1倍,最大和最小缩放倍数为1,禁止用户缩放

    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=0″>

    这次我用到的是<meta name=”viewport” content=”width=750,maximum-scale=1,user-scalable=0”

    其中这一次认识到了另一个更为重要的概念,就是响应式布局的问题,在移动端测试时,发现它是会自动的随屏幕的大小去调节的,但是电脑pc端的情况就不太一样了,看老师示范一下,好像要用到@media这些,所以说我需要的是去了解这个知识点。

            在上次的项目教训告诉我一个道理,就是再没什么必要的时候,为了兼容IE8,还是要尽量少用CSS3的新属性、定位以及多重背景,在移动端就没什么关系,这点还是值得我去注意的。

          在这次的项目中,又学到了一些知识,就是在底部点击切换页面是,会有在那个页面,底部那图标就会显示橙色,其他显示白色的样式,一开始我以为需要用到伪类target的知识点,然后做了没成功,然后我又想用多重背景去做,还是不行,值得庆幸的是看到前面的一个同学做了这个效果,我就去问他,之后就轻松的解决了。所以说多请教多问还是很有必要的。希望能在改写小巨蛋的时候能做到更好吧。

  • 相关阅读:
    SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程)
    Java中将String格式的标准时间字符串转换为Date格式的方法
    ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到
    模式、框架、架构和平台的区别
    架构、框架、模式和平台
    “模式”与“方式”的区别
    JAVA发送HTTP请求方式
    http status状态码,readyState状态码
    区分网络请求时http和ajax请求
    HTTP请求方式中8种请求方法
  • 原文地址:https://www.cnblogs.com/han201388/p/5816680.html
Copyright © 2020-2023  润新知