一、常见处理方式

  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. selective search生成.mat文件

    https://github.com/sergeyk/selective_search_ijcv_with_python 里的selective_search.py是python接口 import t ...

  2. maven手动导入jar包到本地仓库

    一.cmd进入maven的bin目录下(我的目录是E:\cloud_cms\apache-maven-3.5.4\bin) cd E:\cloud_cms\apache-maven-3.5.4\bin ...

  3. Java程序调用自动关机指令 1分钟内自动关机

    package com.swift;//可以不要这句 import java.io.IOException; public class Shutdown100 { public static void ...

  4. 【WordPress】CentOS 6.10 测试WP发送邮件失败

    1.错误信息如下: SMTP -> ERROR: Failed to connect to server: Permission denied (13) 2.解决方法: https://gist ...

  5. GoF23种设计模式之创建型模式之单态模式

    1概述 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 2适用性 1.当类只能有一个实例而且客户可以从一个总所周知的访问点访问它的时候. 2.当这个唯一实例应该是通过子类化可扩展的,并且客户应 ...

  6. 洛谷P2389 电脑班的裁员（区间DP）

    题目背景 隔壁的新初一电脑班刚考过一场试,又到了BlingBling的裁员时间,老师把这项工作交给了ZZY来进行.而ZZY最近忙着刷题,就把这重要的任务交(tui)给了你. 题目描述 ZZY有独特的裁 ...

  7. hadoop启动时权限不足

    之前在使用时的没用去懂.ssh,后来因为一些情况直接将其权限修改为777. 第一位7等于4+2+1,所以就是rwx,所有者有读取.写入.执行的权限:第二位7也是4+2+1,rwx,同组用户具有读取.写 ...

  8. Ubuntu下的定时备份数据库

    1.编写备份数据库的shell脚本 mysqldump -uUserName -pPassword dbName >/XXX/XXXX/XXXX/fileName_$(date +%Y%m%d_ ...

  9. 用 Tensorflow 建立 CNN

    稍稍乱入的CNN,本文依然是学习周莫烦视频的笔记. 还有 google 在 udacity 上的 CNN 教程. CNN(Convolutional Neural Networks) 卷积神经网络简单 ...

  10. spark 对hbase 操作

    本文将分两部分介绍,第一部分讲解使用 HBase 新版 API 进行 CRUD 基本操作:第二部分讲解如何将 Spark 内的 RDDs 写入 HBase 的表中,反之,HBase 中的表又是如何以 ...