实现不同分辨率电脑页面自适应

大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：

1. 1、天猫
   

   • 内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。

   • 有些区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕；

   2、淘宝
   

   • 内容区也是采用了媒体查询+定宽；

   • 达到某个节点之后隐藏某些元素：

   
   

   1. 3、微博
      

      • 页面主体定宽，当小于1007的时候，把侧边栏隐藏，内容区本身是定宽。

      
      

      4、亚马逊
      

      • 很多宽度和高度是js动态计算赋值。

      • 
        

   2. 注意：

      内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）

      最优先适配最常见的分辨率，比如1366,1920，1440（如果包括mac air或者其他apple设备和分辨率），不要对页面中太多的地方做响应式

   
   

   @media 实现的响应式布局

   @media 定义和使用

   @media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。
   

   当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

   （@media screen and，screen用于电脑屏幕，平板电脑，只能手机等）
   

简单使用

/*大于1100px，小于1300px */
@media screen and (min-width: 700px) and (max-width: 1099px) {
    .input_select_com {
        width: calc(100% - 90px) !important;
    }
    .textarea_class{
        width: 400px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .select_text_back{
        width: 110px !important;
    }
}

/*大于1100px，小于1400px */
@media screen and (min-width: 1100px) and (max-width: 1400px) {
    .input_select_com {
        width: calc(100% - 110px) !important;
    }
    .textarea_class{
        width: 550px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .select_text_back{
        width: 135px !important;
    }

}

/*大于1700px */
@media screen and (min-width: 1700px) {
    .input_select_com {
        width: calc(100% - 130px) !important;
    }
    .textarea_class{
        width: 800px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .select_text_back{
        width: 135px !important;
    }

}

顶

0