zoukankan      html  css  js  c++  java
  • Html5移动开发(1)必要知识

    做移动站有一个必要的知识,就是关于屏幕宽度以及缩放问题。我们习惯性的在
            <head>
                标签之间增加一个
                <meta>标签:
                <meta name="viewport" content="width=device-width, initial-scale=1.0,
    minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
                //窗口设定
                name="viewport"
                //页面大小屏幕等宽
                width=device-width
                //初始缩放比例,1.0 表示原始比例大小
                initial-scale=1.0
                //允许缩放的最小比例
                minimum-scale=1.0
                //允许缩放的最大比例
                maximum-scale=1.0
                //用户是否可以缩放,这里 no 表示不可以
                user-scalable=no
                上面最大最小比例其实就已经限制了无法缩放了,和最后一个是否可以缩放有同样的功
                能。
                因为不同的手机,分辨率都不同,图片一定要能够自适应等比例缩放,才能保证布局的
                正确性。
                //设置 max-width 后,图片开始自适应
                img {
                display: block;
                max- 100%;

                }


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <title>移动开发</title>
        <style>
             img {
                display: block;
                max- 100%;
                }
        </style>
    </head>
    <body>
        <img src="img/4.jpg" />
    </body>
    </html>
    


    不同分辨率效果同





  • 相关阅读:
    redis删除指定前缀的缓存
    php生成N个不重复的随机数实例
    Redis数据持久化,安全
    MySQL LOAD DATA
    utf 8无bom和utf 8什么区别
    MySQL直接导出CSV文件,并解决中文乱码的问题
    php 中将完整的年月日时分秒的时间转换成 年月日的形式
    PHP如何根据数组中的键值进行排序
    PHP array_multisort—对多个数组或多维数组进行排序
    sql case 函数与详细说明
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6372428.html
Copyright © 2011-2022 走看看