pc全屏网页布局小技巧

今天又写了一个全屏网页，其实之前也写了很多次，一直都没有总结，今天在这里总结出来的小技巧记录一下。pc的设计图一般都1920的，但是还有很多小屏，比如自己的笔记本就是1366，如果说完全按照设计图的尺寸布局，那放在小屏幕上浏览时总会有一些地方不协调，字体过大，图片过大，间距过大。下面就以今天的网页为例解析一下遇到的情况。

1、字体不协调的问题

这个时候em这个单位就很用。我们pc端布局通常习惯使用px,px大小是固定的，而em大小不是固定的，em会继承父元素的字体大小，比如父元素的font-size为16px,其子元素的font-size为1em,那这个时候子元素的font-size换算过来就是16px，所以这时16px=1em,如果父元素font-size为20px,那这时1em=20px,em会随父元素font-size变化而变化。先看代码：
.banner{
    height: 634px;
    background: url(../images/banner_01.png) no-repeat center center;
    width: 100%;
    color: #992422;
    font-size: 14px;
    .title1{
        font-size: 3.85em;
        padding-top: 125px;
        font-family: wending;
        word-spacing: .2em;
        letter-spacing: .2em;
    }
}
@media screen and(max-width: 1366px ){
    .banner{
        font-size: 10px;
    }
}
        前一段是是适配1920，后一段适配1366及以下，在不同的屏幕下，我们只需要改变父元素的字体大小，使用em子元素就是等比例放大或者缩小，如果子元素使用的是px，可能不同分辨率下都要修改一下，如果子元素很多，那改起来很麻烦，这样只需要改动一个地方，子元素自动适配，是不是用起来很开心。

2、背景图片如何在不同分辨率看起来都差不多，没有被拉伸的感觉

         这个得根据具体情况来分析，具体采用什么样的方式，先看几天遇到的几种情况。

         第一种：

       背景图片上下有渐变，中间位置有要突出的东西，这时候建议高度就是背景图片原有高度，宽度自动适应屏幕，这时候background-position就很有用，第一个值表示背景图片的水平方向起始位置，第二个表示垂直方向，具体的可以自行搜索了解一下，此时第一个值为center水平方向会保留图片中间位置突出的东西，但是两边多余灰色背景会随屏幕缩小而减少，第二个center就是背景图垂直方向100%填充。
.banner{
    height: 634px;
    background: url(../images/banner_01.png) no-repeat;
    background-position: center center;
    width: 100%;
    color: #992422;
    font-size: 14px;
}
        是不是在小屏幕上最大程度保留了背景图要突出的东西。

        第二种

        背景图片水平位置突出的东西不能缺少，底部突出东西也不能缺少，顶部的背景可以考子元素的高度撑开，此时需要用到background-position和background-size两个属性，其中background-position第二个值为bottom为背景图从底部位置开始填充，而background-size第一个值为100%，表示水平方向背景图100%填充，高度auto自动，这样高度靠子元素高度撑开，背景图就不会有被拉伸的感觉。
.case{
    background: url(../images/case_bg_03.png) no-repeat ;
    background-position:center bottom ;
    background-size: 100% auto;
    margin-top: -45px;
    overflow: hidden;
    >img{
        width: 78.125%;
        display: block;
        margin: 470px auto 70px;
    }
}
        屏幕太小，只能截这么短，看水平和底部位置，是不是没什么变化。同理，如果表现的是顶部和水平，只需将bottom改为top即可，今天也遇到这种情况，这里就不列出了。

3、水平位置文字居中，图片居中

      文字居中很简单，包裹文字的容器宽度等于屏幕宽度，直接设置一个text-align:center就可以了。图片居中有两种方法

      第一种：计算图片整个屏幕宽度比，这样不论屏幕放大缩小，图片都是等比缩放。
.case{
    background: url(../images/case_bg_03.png) no-repeat ;
    background-position:center bottom ;
    background-size: 100% auto;
    margin-top: -45px;
    overflow: hidden;
    >img{
        width: 78.125%;
        display: block;
        margin: 470px auto 70px;
    }
}
第二种：使用css3的transform:scale()方法，不过ie8不支持，ie9是支持的，这种方法其实不太好，如果屏幕分辨率差别不大，用一套还可以，如果差别大，就要写多个媒体查询，推荐第一种。
@media screen and(max-width: 1366px ){
    .major{
        .icon-major_link_04{
            transform: scale(.71);
            margin-top: 70px;
        }
    }
}
4、其他

   第一种

        这种情况参考图片居中，最外层盒子设置百分比，子元素也设置百分比。

       第二种

        这个带表单的，最好可视区域显示完要填写的信息，所以老老实实多写几套适配吧，我也没有想到更好的办法。

注：以上示例代码都是sass的写法，若拷贝使用改为正常css选择器，或者使用sass编译工具编译都可以。

今天遇到大概就这几点，睡了睡了。
 

来源：CSDN

作者：意井

链接：https://blog.csdn.net/luoyu19940615/article/details/80716247

标签

background

font-size

background-size