zoukankan      html  css  js  c++  java
  • 关于写手机页面demo的准备工作

    写手机页面,存在不同的手机屏幕分辨率的问题,因此,怎样做到统一的画面展示,是我想要寻找的答案。

    虽然也搜寻过一些例子,不过还是不确定那种会更好。

    目前,想来做个笔记,记录其中的一个。

    首先页面中单位不再是用 px来写,而是em。

    其次,medioadaption.css是需要的,这里是一个例子

    @media screen and (min-1080px){
    html,body{ font-size:36px;}
    }
    @media screen and (min-720px) and (max-1079px){
    html,body{ font-size:28px;}
    }
    @media screen and (min-640px) and (max-719px){
    html,body{ font-size:24px;}
    }
    @media screen and (min-540px) and (max-639px){
    html,body{ font-size:20px;}
    }
    @media screen and (min-480px) and (max-539px){
    html,body{ font-size:18px;}
    }
    @media screen and (min-320px) and (max-479px){
    html,body{ font-size:14px;}
    }

    当然有时候在IOS系统上会有些出入,还需加个more.css来特殊定义下
    @media only screen and (max-device- 480px) and (-webkit-min-device-pixel-ratio:2)
    {
    ...
    }


    最后页面头部不可缺少的还有:


    <meta name="format-detection" content="telephone=no" />
    <meta name = "viewport" content ="width=device-width,initial-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"/>

  • 相关阅读:
    ubuntu18.04管理redis
    Mac Vmware虚拟机重启后没有网络
    记Spark写数据到Elasticsearch的报错
    Spark基础和RDD
    PHP日期处理
    集群命令
    hadoop集群时间同步
    HBase读写流程
    Flume简介
    Linux 常用快捷键
  • 原文地址:https://www.cnblogs.com/wzzl/p/4555372.html
Copyright © 2011-2022 走看看