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,刚好

  • 相关阅读:
    python 枚举enum
    python lambda 三元表达式
    python修改类属性
    python获取引用对象的个数
    python 返回实例对象个数
    python __del__() 清空对象
    python面向对象:继承
    python面向对象:多态
    Docker容器和K8s添加Health Check
    mkfs.xfs: /dev/vdb appears to contain a partition table (dos)
  • 原文地址:https://www.cnblogs.com/v-weiwang/p/4759529.html
Copyright © 2011-2022 走看看