【CSS】移动端适配

移动端适配怎么做?

适配的目的是在屏幕大小不同的终端设备拥有统一的界面,让拥有更大屏幕的终端展示更多的内容。

meta viewport (视口)

移动端初始视口的大小默认是980px,因为世界上绝大多数PC网页的版心宽度为980px ,如果网页没有专门做移动端适配,此时用手机访问网页旁边刚好没有留白,不过页面缩放后文字会变得非常小。

为了解决页面缩放的体验问题,在网页代码的头部,加入一行viewport元标签。这里的device-width告诉浏览器,将视口的宽度设置为设备宽度(这个宽度是人为预设的,不设的话就是980px)。

属性含义:

  • initial-scale:第一次进入页面的初始比例
  • minimum-scale:允许缩小最小比例
  • maximum-scale:允许放大最大比例
  • user-scalable:允许使用者缩放, 1 or 0 (yes or no)
"viewport"
    content="width=device-width, initial-scale=1.0"
>

图片适配

img {max-width: 100%;}此时图片会自动缩放,同时图片最大显示为其自身的100% (即最大只可以显示为自身那么大)。

为什么不用 img{width: 100%;}?当容器大于图片宽度时,图片会拉伸变形变模糊。

媒体查询

针对不用的设备提前为网页设定各种CSS样式。CSS3中的Media Query模块,自动检测屏幕宽度,然后加载相应的CSS文件语法举例@media screen and (min-width:1200px){ body{background-color: red;}当屏幕宽度大于1200px时,背景色变为红色。

动态 rem 方案

和媒体查询配合,实现响应式布局。

px、em、rem 有什么不同?

px是pixel (像素) ,是屏幕上显示数据的最基本的点,在HTML中,默认的单位就是px。

em是一个相对大小。相对于父元素font-size的百分比大小。

rem是相对于根元素的font-size。

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(113, 230, 191);
    }

    .w-750px {
        width: 750rem;
        height: 100px;
        background-color: rgb(239, 198, 94);
    }
</style>

<body>
    <div class="w-550px"></div>
    <div class="w-750px"></div>
    <script>
        function setRem() {
            const scale = document.documentElement.clientWidth / 750
            document.documentElement.style.fontSize = scale + 'px'
        }
        setRem()
        window.onresize = setRem
    </script>
</body>

【CSS】移动端适配_第1张图片

你可能感兴趣的:(CSS,css,前端)