zoukankan      html  css  js  c++  java
  • pc端自适应方案

    一、常见处理方式

    1. 定宽
      电商类、内容为主的网站几乎采用这种方式
      1.网易考拉、京东(1190px)
      2.知乎(1000px),果壳(1000px),网易新闻(1200px)
    2. 媒体查询+定宽
      图片类、简单布局。在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏
      1.花瓣网
    1. @media screen and (min- 1529px)版心为1500px
    2. @media screen and (min- 1276px) and (max- 1528px)版心为1248px
    3. @media screen and (max-1275px)版心为996px
    2.天猫  
    
    1. @media screen and (min-1260px)版心为1230px
    2. @media screen and (max- 1260px)版心为982px

    二、常见pc屏幕

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

    三、注意事项

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

  • 相关阅读:
    centos-docker安装及基本使用
    List集合-03.Vector
    List集合-02.LinkedList
    List集合-01.ArrayList
    常用图像处理方法
    git使用
    bug记录
    bash vim等常用命令
    python常用
    MTCNN试用
  • 原文地址:https://www.cnblogs.com/xiaotiejiang/p/10973917.html
Copyright © 2011-2022 走看看