pc端做适配

最近做公司官网，做了适配，总结一下，防止下次做适配的时候在走弯路

步骤

1.确定要做哪些屏幕的适配

目前主流的屏幕有 window系统 1920 1366 其中1920的推荐显示为125% 其宽度为1530 所以1530的兼容也要做 mac系统 1680 1440 1280 1024

2.和需求、ui讨论要做多少套兼容，然后根据讨论结果出设计图

3.根据设计图，搭建框架，做适配

做适配

媒体查询 根据不同的屏幕宽度设置不同的样式达到适配效果

媒体查询分为公共和局部：

公共的为所有的公共样式，如一级标题、二级标题在不同屏幕上的字体大小、是否加粗，写在公共样式中，直接引用（公共样式在开始做适配前要和ui对好，要不后面会很麻烦）

局部为一些特殊的样式，不能写在公共中，否则会和别的位置样式冲突

局部示例：

// 如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
复制代码

// 如果文档宽度大于 300 像素则修改背景颜色(background-color):
@media screen and (min-width: 300px) {
    body {
        background-color:lightblue;
    }
}
复制代码

// 如果文档宽度大于 1900 像素小于1920像素则:
@media screen and (min-width: 1900px) and (max-width: 1920px){
      transform:scale(1.3);
}
复制代码

在设置时，需要注意先后顺序，不然后面的会覆盖前面的样式。

流式布局

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

一般都是流式布局（即百分比布局）和媒体查询混合使用