zoukankan      html  css  js  c++  java
  • 关于HTML,css3自适应屏幕,自适应宽度

    设置了在不同分辨率下,显示的css样式:

    @media screen and (min-1080px){
      .box{ width: 1080px;}.content{width: 1040px;}
      .img{height:180px;}
      .img{font-size: 48px;line-height: 180px;}
      .title{font-size: 46px;line-height: 100px;}
      .detail{font-size: 20px;}
    }
    
    
    @media screen and (min- 900px) and (max- 1079px) {
      .box{ width: 900px; }.content{width: 860px;}
      .img{height:160px;}
      .img{font-size: 40px;line-height: 160px;}
      .title{font-size: 38px;line-height: 80px;}
      .detail{font-size: 17px;}
    }
    @media screen and (min- 768px) and (max- 899px) {
      .box{ width: 768px; }.content{width: 728px;}
      .img{height:140px;}
      .img{font-size: 32px;line-height: 140px;}
      .title{font-size: 30px;line-height: 60px;}
      .detail{font-size: 14px;}
    }
    @media only screen and (min- 480px) and (max- 767px){
       .box{ width: 480px; }.content{width: 440px; }
      .img{height:98px;}
      .img{font-size: 24px;line-height: 100px;}
      .title{font-size: 22px;line-height: 40px;}
      .detail{font-size: 11px;}
    }
    @media only screen and (max- 479px) {
      .box{ width: 300px; }.content{width: 300px;}
      .img{height:60px;}
      .img{font-size: 16px;line-height: 60px;}
      .title{font-size: 14px;line-height: 20px;}
      .detail{font-size: 8px;}
    }

    要是刚好在那个宽度上,如:屏幕宽度900,刚好

  • 相关阅读:
    Windows32位与64位操作系统的区别【转】
    【C#多线程详解】
    auto_ptr
    #if 1......
    vector 向量容器
    删除可视图中的类不能彻底避免它重新被编译
    _tWinMain 与wWinMain 区别
    explicit 用法
    转:atoi函数的实现
    string类的实现
  • 原文地址:https://www.cnblogs.com/v-weiwang/p/4759529.html
Copyright © 2011-2022 走看看