一、常见处理方式

  1. 定宽
    电商类、内容为主的网站几乎采用这种方式
    1.网易考拉、京东（1190px）
    2.知乎（1000px),果壳（1000px),网易新闻（1200px)

  2. 媒体查询+定宽
    图片类、简单布局。在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏
    1.花瓣网

    1. @media screen and (min-width: 1529px)版心为1500px
    2. @media screen and (min-width: 1276px) and (max-width: 1528px)版心为1248px
    3. @media screen and (max-width:1275px)版心为996px

    2.天猫

    1. @media screen and (min-width:1260px)版心为1230px
    2. @media screen and (max-width: 1260px)版心为982px

二、常见pc屏幕

一般只需要适应 1920px、1440px、1366px主流分辨率

三、注意事项

1.如果是自适应尽量控制变化范围、尽量只是布局微调
2.不对过多地方做响应式减少设计和前端的工作
3.在设计前期，由前端和设计共同确定断点，一般设计两个端点就差不多了。

pc端自适应方案的更多相关文章

  1. finereport普通报表的移动端自适应方案

    移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...

  2. 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  3. PC端自适应布局

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

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

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

  5. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  6. vue中移动端自适应方案

    安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加m ...

  7. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  8. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  9. 如何解决PC端和移动端自适应问题？

    做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...

随机推荐

  1. Spring，FetchType.LAZY和FetchType.EAGER什么区别？

    1.FetchType.LAZY:懒加载,加载一个实体时,定义懒加载的属性不会马上从数据库中加载. 2.FetchType.EAGER:急加载,加载一个实体时,定义急加载的属性会立即从数据库中加载. ...

  2. python_33_文件操作2

    f=open('yesterday',encoding='utf-8') #print(f.readline())#读一行,并且是第一行 #读前5行 for i in range(5):#range( ...

  3. Oracle 换行符 空格符 回车符

    ① 换行符 chr(10)② 回车符 chr(13) ③ 空格符 chr(9) 例1:效果对比.chr(10)在一个字段中换行显示一列数据,chr(13)同样是换行显示一行数据,chr(9)会显示一个 ...

  4. CURLOPT_PROGRESSFUNCTION

    Author:李强(李祥祥) Date   :2012-12-15 17:26 LIBCURL官方网站都没有说清楚道明白进度函数的参数的作用,这点我感觉文档很片面,经总结如下: size_t CUpl ...

  5. Mysql--7种Join查询

    0.sql的执行顺序 手写顺序 机读顺序 总结 ①From:对from左边的表和右边的表计算笛卡尔积,产生虚拟表c1 ②On:对c1中的数据进行on过滤,只有符合过滤条件的数据记录才会记录在虚拟表c2 ...

  6. C++ lambda 表达式 简介

    自己根据对lambda表达式的理解,做了一套ppt简单介绍

  7. vue 中有时候是数据没有同步的问题

    1,在项目中,在做表格的数据渲染的时候,表格中有input标签的数据来进行双向绑定, this.$set(this.tableTitle.money, index, money[index]+isMo ...

  8. tp3.2框架中使用volist输出混乱的一点发现

    在tp框架中,volist真的是一样很好用的东西,但是要是不注意,用起来也会有问题的 在Controller层中,将数据assign到页面 $this->assign('vo',$news); ...

  9. JZOJ 2136. 【GDKOI2004】汉诺塔

    2136. [GDKOI2004]汉诺塔 (Standard IO) Time Limits: 3000 ms  Memory Limits: 128000 KB  Detailed Limits   ...

  10. mysql同步故障解决

    故障现象:Slave_SQL_Running: No Slave状态:mysql> show slave status\GSlave_IO_Running: YesSlave_SQL_Runni ...