码上敲享录 > css样式的常见问题解答 > 实现不同分辨率电脑页面自适应

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

上一章章节目录下一章 2020-02-24已有2877人阅读 评论(0)

大多数内容为主的网站(知乎,果壳,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

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交