移动web开发(5)之rem适配布局

y191024

发布于 2022-09-20 19:48:46

1.2K00

代码可运行

运行总次数：0

代码可运行

刚刚又把携程的案例做了一遍,发现还是有问题的,虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的.

01

rem单位

rem(root em)是一个相对单位,类似于em,em是父元素字体大小.

不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html,如果想要实现自适应,那就只要修改html的字体大小即可,但是em的话则要修改许许多多的盒子.

02

媒体查询

媒体查询(Media Query)是CSS3的新语法

使用@media查询,可以针对不同的媒体类型定义不同的样式.
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面.
目前针对很多苹果手机,Android手机,平板等设备都用得到多媒体查询

语法:

@media mediatype and | not | only (media feature) {

CSS-Code;

}

用media开头,注意@符号
mediatype 媒体类型
关键字and no only
media feature 媒体特性必须要有小括号包含

mediatype查询类型

将不同的终端设备划分成不同的类型,称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕,平板电脑,智能手机等

关键字

媒体特性

每种媒体类型都具体有各自不同的特征,根据不同媒体类型的媒体特征设置不同的展示风格,我们暂且了解三个,注意他们都要加上小括号包含.

值	解释说明
width	定义输出设备中页面可见的区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

举个例子:

    <style>
        /* 这句话的意思是:在我的屏幕吧上,且最大的宽度为800像素,就设置成我们想要的样式 */
        @media screen and (max-width:800px) {
            body {
                background-color: pink;
            }
        }
</style>

那么我们实验一下,当屏幕宽度大于800时,body的颜色会怎么变化:

03

媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化.

做一个小案例,当屏幕尺寸变化时,元素大小也会动态变化:

我们将字体和盒子的大小单位不定死,而是用随着html变化而动态变化的rem单位,这样我们只要修改html字体大小,就可以让字体和盒子大小跟着变化,使用媒体查询修改通过判断屏幕的大小改变html字体的大小

让文字垂直居中利用的是line-height,这里也可以不定死,用rem单位,将line-height设置成height一样就可以.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
            
        }
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: goldenrod;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
</style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

04

引入资源(理解)

当样式比较繁多的时候,我们可以针对不同的媒体使用不同的stylesheets(样式表).

原理就:就是直接在link中判断设备的尺寸,然后引用不同的css文件.其实就是做几个不同样式的css文件,然后判断情况引用不同的文件.

语法:

小案例:当屏幕尺寸小的时候,一行只显示一个盒子,当尺寸大时,一行显示两个.

其实写了两个CSS样式

当屏幕尺寸最小为320px时:

.box div {
    width: 100%;
    height: 100px;
    background-color: pink;
}
.box div:nth-child(2) {
    background-color: royalblue;
}

当屏幕尺寸最小为640px时:

.box div {
    float: left;
    width: 50%;
    height: 100px;
    background-color: pink;
}
.box div:nth-child(2) {
    background-color: royalblue;
}

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
    <title>Document</title>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

后面要学习LESS啦,下一篇写!有点激动hhh

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-17，如有侵权请联系 cloudcommunity@tencent.com 删除

html