截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局:

  1. 天猫

    • 内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏。
    • 注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的,但是也可以完美的适应不同的屏幕;
  2. 淘宝 
    • 内容区也是采用了媒体查询+定宽;
    • 达到某个节点之后隐藏某些元素:

宽屏: 

窄屏: 

  1. 微博

    • 页面主体定宽,当小于1007的时候,把侧边栏隐藏,内容区本身是定宽。
  2. 亚马逊 
    • 很多宽度和高度是js动态计算赋值。

总结(什么时候做响应式,怎么做响应式)

  • 目前看来,内容为主的社区网站或者电商网站使用自适应布局的并不多,仅有的几个也没有做大范围的自适应布局,一般是使用媒体查询在几个断点(不超过三个,微博这样的只设置了一个断点)做响应式进行布局微调。

  • 内容为主(大量文字,少量图片)的网站不适合做响应式布局,大量图片少量文字的网站比较适合做响应式布局(比如花瓣,airbnb)。是否做响应式和用户体验没有必然关系。

  • 如果要做PC端自适应布局,尽量控制变化的范围,只有在不得已的情况下才进行布局的微调,不要对页面中太多的地方做响应式(尤其是字体随着页面的宽度而变化),因为可以变化的地方越多,不仅成倍增加设计和前端的工作量,而且对页面的风格也更加难以把握,容易出力不讨好,目前市面上页面有这样做的网站,应该极力避免!

  • 在设计前期,由前端和设计共同确定断点。

  • 最优先适配最常见的分辨率,比如1366,1920,1440(如果包括mac air或者其他apple设备和分辨率)

  • 确定好由小屏一直兼容到大屏,还是有大屏一直兼容到小屏幕(这个就是设计那边确定了)

  • 如果做单页展示(比如卧龙和选品),还要考虑高度的限制,考虑最小的高度情况下的设计(这个在设计阶段需要考虑更多!)。 PS: 内容比较多,兼容性要求高的网站不适合使用单屏展示,如果要用的话,考虑好最小的适配分辨率,尤其是最小的高度。

 
 

PC端自适应布局的更多相关文章

  1. 第 31 章 项目实战-PC 端固定布局[3]

    学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.搜索区 本节课 ...

  2. 第 31 章 项目实战-PC 端固定布局[5]

    学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.底部区 ...

  3. 第 31 章 项目实战-PC 端固定布局[4]

    学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门 ...

  4. 第 31 章 项目实战-PC端固定布局[2]

    学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.大纲算法  ...

  5. 第 31 章 项目实战-PC端固定布局[1]

    学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...

  6. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  7. pc端常见布局样式总结(针对常见的)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 使用rem配置PC端自适应大屏

    效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...

  9. pc端自适应方案

    一.常见处理方式 定宽 电商类.内容为主的网站几乎采用这种方式 1.网易考拉.京东(1190px) 2.知乎(1000px),果壳(1000px),网易新闻(1200px) 媒体查询+定宽 图片类.简 ...

随机推荐

  1. Java之static作用的深度总结

    1.深度总结 引用一位网友的话,说的非常好,如果别人问你static的作用:如果你说静态修饰 类的属性 和 类的方法 别人认为你是合格的:如果是说 可以构成 静态代码块,那别人认为你还可以: 如果你说 ...

  2. 23 SVN---版本控制系统

    1.SVN介绍 SVN是Subversion的简称,是一个自由开源的版本控制系统. Subversion将文件存放在中心版本库里,这个版本库很像一个普通的文件服务器,不同的是,它可以记录每一次文件和目 ...

  3. aspnetcore identity result.Succeeded SignInManager.IsSignedIn(User) false?

    登陆返回的是 result.Succeeded 为什么跳转到其他页面SignInManager.IsSignedIn(User)为false呢? result.Succeeded _signInMan ...

  4. kafka web端管理工具 kafka-manager【转发】

    1,下载与安装 $ git clone https://github.com/yahoo/kafka-manager.git $ cd kafka-manager $ ./sbt clean dist ...

  5. 一定要记住的14个JVM内存配置参数

    jvm setting的参数确实比较多(Oracle官网Java HotSpot VM Options),但是作为一名java开发者,那几个最常用最基本的参数设置和意义一定要死记和理解.这里推荐一个网 ...

  6. 56 容器(十)——Iterator迭代器遍历容器

    迭代器的获取 LIst与Set容器统一使用他们的对象.Iterator()方法获得迭代器对象,然后使用while循环配合迭代器的方法hasNext()及next()来遍历容器. List<Str ...

  7. 1. Spark Streaming概述

    1.1 什么是Spark Streaming Spark Streaming类似于Apache Storm,用于流式数据的处理.根据其官方文档介绍,Spark Streaming有高吞吐量和容错能力强 ...

  8. 忘记token怎么加入k8s集群

    一.概述 新版本的k8s,初始化生成的token,只有24小时.超过时间,就得需要重新生成token,为了避免这种情况,直接生成永久的token 二.操作步骤 1.生成一条永久有效的token kub ...

  9. 运行一个docker镜像并开机启动

    记录,我用的liunx机是centos7.x 安装 安装Docker包$ sudo yum install docker-engine 启动Docker守护进程$ sudo service docke ...

  10. Ubuntu中安装(升级)GraphicsMagick

    1 前言 采用官方下载安装包然后强制安装升级Ubuntu中有的老版本gmagick-1.3.28,升级到gmagick-1.3.31 仅用来记录使用. 2.准备工作 1.下载安装包 https://s ...