媒体查询法复刻好看的网页

媒体查询法复刻好看的网页

效果展示入口

既然是媒体查询当然缺少不了media，具体的如何使用让界面在三个（pc 平板 手机）不同的设备上展示不同的适应效果的方法可查看上面的博客。

这里主要介绍布局的思路，因为要适应手机端所以所有计量单位用rem 给根元素上面设计font-size。

1. 对于大的布局主要是需要的给每个大的板块固定住，当然在手机端口大小时候，这时候页面的宽度比较小所以需要大的板块继承手机屏幕最大的宽度更好的展示效果，所以我的方法是在pc和平板的端口时候给于板块中间包裹内容的div赋予固定的宽分别为1024px和768px这样就可以无论多大的屏幕让内容工整，在手机大小的时候修改排版，让大的板块拆成两份，这样可以展示页面的同时也不会有横向的进度条。

2. 分解子内容，对于大图的由于pc和平板端时，大div给予了具体大宽度，所以可以给具体的值去展现图片，当然如果需要好看的展现给予一定的margin是需要的，要让图片旁边有空隙。在手机端口的时候这时候大div是视口的宽度所以需要按百分比继承或者用rem写图片宽高。

3. 这里主要介绍对于一排变多排和3排转2排转1排

如上图，如果需要进行先横向有间隙的排列然后变为有间隙列向排列一列，建议运用弹性盒子flex ，主轴从左到右， space-around让它右间隙的对齐排列

    display: flex;
    flex-direction: row;
    justify-content: space-around;

当变为手机或者平板端时，主轴变为从上到下，并且由于副轴变为横向，由于一行一个添加 align-items: center让它水平居中。

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

如上图，从一排3变为2变为1，这里建议运用弹性盒子或者浮动，如果个数为整数时用浮动既简单也方便，只需要该承载内容的宽高即可。

~~~~~~~~~ end ~~~~~~~~~