zoukankan      html  css  js  c++  java
  • 响应式设计

    @media screen and (min-800px) and (max-1060px){
        li{
        font-size:10em;
        }
    }

    意味着,在屏幕上(而不是打印机)并且当最小像素为800,最大像素为1060时应用括号内的样式

    因为css(层叠样式表)后面的规则会覆盖前面的,所以通用的规则需要写在媒体查询前面

    元素的大小使用百分比,计算公式是:目标元素宽度÷上下文元素宽度(浏览器宽度或父元素宽度)=百分比宽度

    如:

    @media screen and (min-800px) and (max-1080px){
        body{
        font-size:5px;
        width:96%;/*960÷1000*/
        }
        li{
        font-size:10em;
        width:97.9166667%;//*940÷960*/
        }
    }

    使用em而不是使用px来设置字体大小,这样做的好处是设置body或其他父元素的font-size:8px(或更小时),子元素的字体大小会自动更改;
    图片的设置使用百分比

    img{
        width:18.75%;/*180÷960*/
        max-width:180px;/*避免图片被拉大到超过图片实际大小而失真*/
        }

     自适应图片,为不同屏幕提供不同大小的图片,例如在手机上提供尺寸较小的图片,而在电脑上提供较大的图片,以减少请求图片所消耗的带宽

    demo见

    http://git.oschina.net/zuoxiaobing/Adaptive-Images--demo

    从commit记录里可以知道操作

  • 相关阅读:
    利用Tomcat搭一个原型图服务器
    Linux 安装Nginx
    Linux 数据库安装
    一点点感慨
    文件锁-fcntl flock lockf
    Linux生成core文件、core文件路径设置
    信号量 互斥量 读写锁 条件变量
    二叉树遍历
    UNIX网络编程——常用服务器模型总结
    hash_map
  • 原文地址:https://www.cnblogs.com/zuoxiaobing/p/4671895.html
Copyright © 2011-2022 走看看