一、常见处理方式

  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. django建议入门-FYI

    django 简易博客 现在正式开始博客开发 1安装官方发布版 官方发布的版本带有一个版本号,例如1.0.3或1.1,而最新版本总是可以在http://www.djangoproject.com/do ...

  2. Aizu 2303 Marathon Match （概率）

    因为第i个人休息j次服从二项分布,算一下组合数. 数据范围小. 求出第i个人休息j次的概率和对应的时间之后,全概率公式暴力统计. #include<bits/stdc++.h> using ...

  3. 黑箱中的 retain 和 release

    https://github.com/Draveness/Analyze/blob/master/contents/objc/黑箱中的%20retain%20和%20release.md 写在前面 在 ...

  4. ZJOI2004 午餐

    题目传送门 嗯--我承认我看了题解,不过好歹有了点自己的思路,大约蒙出来了\(30\%\)(个人感觉)-- 学会\(DP\),任重而道远啊! Step1.贪心排序 先将每个人按吃饭的快慢排序,然后再进 ...

  5. oc字符串截取 数组字典运用

    #define NSLog(FORMAT, ...) printf("%s\n", [[NSString stringWithFormat:FORMAT, ##__VA_ARGS_ ...

  6. 2018.10.30 NOIp模拟赛T2 数字对

    [题目描述] 小 H 是个善于思考的学生,现在她又在思考一个有关序列的问题.        她的面前浮现出一个长度为 n 的序列{ai},她想找出一段区间[L, R](1 <= L <= ...

  7. [Wolfgang Mauerer] 深入linux 内核架构 第二章 进程管理与调度【未完】

     作为Linux开发爱好者,从事linux 开发有三年多时间.做过bsp移植,熟悉u-boot代码执行流程:看过几遍<linux 设备驱动程序开发>,分析过kernel启动流程,写过驱动, ...

  8. php 单冒号 、双冒号的用法

    单冒号: 常用与三元运算,如:$result = $str ? $str : $str1; 双冒号: 1,当调用静态属性和静态方法时 2,当调用自身类或者父类的属性或者方法时

  9. EventUtil处理js兼容性问题

    var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ elem ...

  10. 笔记-爬虫-robots.txt

    笔记-爬虫-robots.txt 1.      robots.txt文件简介 1.1.    是什么 robots.txt是用来告诉搜索引擎网站上哪些内容可以被访问.哪些不能被访问.当搜索引擎访问一 ...