一、常见处理方式

  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. IOS 线程描述

    ●什么是线程 ● 1个进程要想执行任务,必须得有线程(每1个进程至少要有1条线程) ● 线程是进程的基本执行单元,一个进程(程序)的所有任务都在线程中执行 ● 比如使用酷狗播放音乐.使用迅雷下载电影, ...

  2. 【BZOJ1925】 [SDOI2010] 地精部落（带有一堆性质的动态规划）

    点此看题面 大致题意: 问你有多少长度为\(n\)的数列,它当中每个数字要么比旁边两个数字都小,要么比旁边两个数字都大. 性质 这题应该比较显然是一道动态规划题,但刚看到这题时我却无从下手. 其实,了 ...

  3. 【洛谷2152】[SDOI2009] SuperGCD（Python好题）

    点此看题面 大致题意: 给你两个长度\(\le10000\)的正整数,让你求它们的\(gcd\). Python​ 高精请绕道. 这题的正解应该是Python. 对于这种高精题,肯定是Python最方 ...

  4. cuda api查询问题

    在查询CUDA运行时API的时候,我用360极速浏览器的时候搜索结果一直不出来,但是用火狐的话就很流畅,所以建议大家在开发时还是用火狐浏览器.

  5. CUDA实现数组倒序

    数组倒序,将在主机上初始化的数组传输到设备上,然后用CUDA并行倒序,此时在全局内存上操作,再将结果返回到主机并验证. #include <stdio.h> #include <as ...

  6. Angular2 Service获取json数据

    在Angular2框架下一般交互解析json是要用到Service的,其实除了Service还是很多的,今天先写个最简单的前后端数据交互 嗯~~ 首先我先在app包下直接创建Service 好了 这里 ...

  7. BZOJ3679: 数字之积(数位dp)

    题意 题目链接 Sol 推什么结论啊. 直接大力dp,$f[i][j]$表示第$i$位,乘积为$j$,第二维直接开map 能赢! /* */ #include<iostream> #inc ...

  8. linux下/dev/null被误删

    /dev/null文件是一个特殊的设备文件,可以用于清空一些日志文件,或者是使一些信息输出到此文件,用以节省硬盘空间.如果该空文件/dev/null文件被误删除掉, 如何再使用系统命令重新创建并设置该 ...

  9. makefile学习（2）

    新建目录如下: ├─include │ integrate.h │ └─src │ integrate.c │ main.c │ makefile │ └─obj obj用于存放object文件. m ...

  10. 洛谷 P2205 [USACO13JAN]画栅栏

    这题其实没什么,但用到的算法都十分有用.做一个不恰当的比喻,这是一只必须用牛刀杀的鸡,但因为我这个蒟蒻杀不死牛,所以只能找只鸡来练练手. 题目描述 Farmer John 想出了一个给牛棚旁的长围墙涂 ...