一、常见处理方式

  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 UIActionSheet(底部 弹出框的使用)

    UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"确定要注销?" delegate:self cancel ...

  2. Using an Image for the Layer’s Content

    Using an Image for the Layer’s Content Because a layer is just a container for managing a bitmap ima ...

  3. Trie：字典树

    简介 \(Trie\),又称字典树或前缀树,是一种有序树状的数据结构,用于保存关联数组,其中的键值通常是字符串. 作用 把许多字符串做成一个字符串集合,并可以对其进行快速查找(本文以求多少个单词是一个 ...

  4. 用ComboBox控件制作浏览器网址输入框

    实现效果: 知识运用: ComboBox控件的FindString public int FindString(string s) //查找数据项集合中指定数据项的索引 和Select方法 publi ...

  5. @TransactionConfiguration过时与替代写法

    在使用了Spring的项目中做单元测试时,以前的标准写法是这样的: 但是在高版本的Spring框架中(Spring4.2以后),@TransactionConfiguration已经标注为过时的注解, ...

  6. Oracle grant connect, resource to user语句中的权限

    博主在 Oracle 11g r2上测试(测试日期:2017.10.30): 用sys登陆到oracle中,执行以下两条语句: select * from role_sys_privs WHERE R ...

  7. java基础编程——二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  8. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. SQL查询出每门课都大于80 分的学生姓名

    Course表如下: 查询出每门课都大于80 分的学生姓名有两种方法. 1.select  distinct name from Course where name not in (select di ...

  10. SQL Server数据库日志清除

    第一步 将数据库转换成 simple 模式 USE master GO ALTER DATABASE 所要删除日志的数据库名 SET RECOVERY SIMPLE WITH NO_WAIT GO 第 ...