zoukankan      html  css  js  c++  java
  • 响应式注意事项

    仅用于个人学习记录

    1.宽度使用百分比+容器浮动(偷懒的做法是采用等比缩放,但是会在小分辨下,文字如蚂蚁般看不清)浮动好处,超出宽度,自动下调

     

    2.流体布局:采用百分比 不适用绝对高度,字体大小采用百分比(相对自己大小)

     

    3.Meta viewport 参数width=device-width  user-scalable=1 initial-scale=1 maximum-scale=1  minimum-scale=1

    最佳组合(<!ViewPortMeta设置,禁止手动缩放-->):<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

     

    4.Media Query CSS

    /* PC宽屏样式 */

    /* iPad 及以下,所有小于(不等于)960宽度的平板电脑 */

    @media only screen and (max- 959px) {}

    /* iPad 竖版,所有小于(不等于)960宽度的平板电脑的竖版 */

    @media only screen and (min- 768px) and (max- 959px) {}

    /* iPhone 及以下 */

    @media only screen and (max- 767px) {}

    /* iPhone 横版,包括某些平板电脑的竖版 */

    @media only screen and (min- 480px) and (max- 767px) {}

    /* iphone4 竖版 */

    @media only screen and (max- 479px) {}

    根据屏幕大小加载不同的样式表

    <link rel=”stylesheet” type=”text/css”media=”screen and 

    (max-device- 400px)”href=”tinyScreen.css” />

     

    5.图片处理:提供不同尺寸的图片;通过background-position来控制裁剪图片

     

    6.<link rel="apple-touch-icon-precomposed" href="http://cdn/img-114-114.png"> -------添加到桌时有圆角/高光修饰

      <link rel="apple-touch-startup-image" href="http://cdn/img-320-460.png">-------只处理圆角没有高光修饰

    <!--添加到主屏时的图标-->

    7.flex box布局

    8.图片自适应 img { max- 100%;}

     

    来源于:http://www.socialbeta.com/articles/2013-the-year-of-responsive-web-design.html

  • 相关阅读:
    Python requests 获取网页一般的方法
    python 开发环境安装及配置
    python os模块常用方法及属性小结
    python sys 模块常用方法小结
    python datetime 模块常用方法小结
    python 异常继承关系及自定义异常的实现
    python 第三方模块的安装及模块导入说明
    python 中 if __name__ == '__main__' 的解释
    Bootstrap 标签页(Tab)插件
    Bootstrap 滚动监听(Scrollspy)插件
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/3229688.html
Copyright © 2011-2022 走看看