移动Web实训-关于移动端适配less,rem和vw,vh测试题2

最新推荐文章于 2022-07-07 23:03:46 发布

HHppGo

最新推荐文章于 2022-07-07 23:03:46 发布

阅读量290

点赞数

分类专栏：移动Web开发文章标签：前端 less css

本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文链接：https://blog.csdn.net/asacmxjc/article/details/125462778

版权

移动Web开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文探讨了CSS中的rem单位、Less预处理器的使用，以及移动端适配方案flexible.js+rem。详细分析了各题目中的CSS选择器、单位转换、变量声明以及媒体查询的应用，展示了前端开发中尺寸控制、样式嵌套和响应式布局的关键知识点。

摘要由CSDN通过智能技术生成

第一题

如下代码中, a标签的2rem等同于( B )

html {
    font-size: 15px;
}

p {
    font-size: 20px;
}

p>a {
    font-size: 2rem;
}

A： 20px

B： 30px

C： 40px

D：以上都不对

第二题

less的嵌套中遇到伪类hover怎么处理合适( C )

A： a{}a:hover{}

B： a{:hover{}}

C： a{&:hover{}}

D： a{a:hover{}}

第三题

书写一个less的变量正确的是(C )

A： $width:100px

B： width=100px

C： @width:100px

D： width@=100px

第四题

下列关于less的描述错误的是(D )

A：常见的CSS预处理器：Sass、Less、Stylus

B： Less是一门 CSS 预处理语言，它扩展了CSS的动态特性

C：它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能

D： Less和css的语法完全一样

第五题

下列关于rem的描述不正确的是( D )

A： rem是长度单位

B： rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

C： rem的基准是相对于html元素的字体大小

D： rem和父元素的字体大小font-size有很大关系

第六题

以下对于flexible.js+rem这种适配方案中flexible理解错误的是( )

A：手机淘宝团队出的简洁高效移动端适配库

B：我们再也不需要在写不同屏幕的媒体查询，flexible帮助我们处理过了

C： flexible原理是将屏幕固定分为10等分

D：程序员需要做的是根据设计稿大小计算1rem是多少即可：比如750px/15

第七题

如下代码中, box盒子的宽和高分别是多少( C )

html {
    font-size: 20px;
}

body {
    font-size: 40px;
}

.box {
    width: 5rem;
    height: 5em;
    font-size: 50px;
}

A：宽度: 100px 高度: 100px;

B：宽度: 200px 高度: 200px

C：宽度: 100px 高度: 250px

D：宽度:200px 高度: 250px

第八题

下列关于媒体查询语句，正确的是( B )

A： @media screen and(width=320px){}；

B： @media screen and (width:320px){}；

C： @media screen and (width=320px){}；

D： media screen and (width=320px){}；

第九题

下面的less代码编译成css的结果正确的是( A )

.box {
    background-color: red;
    .inner {
        background-color: blue;
        &::after {
            content: '';
            background-color: yello;
        }
    }
    > .inner2 {
        background-color: #fff;
    }
}

.box {
  background-color: red;
}
.box .inner {
  background-color: blue;
}
.box .inner::after {
  content: '';
  background-color: yello;
}
.box > .inner2 {
  background-color: #fff;
}

.box {
  background-color: red;
}
.box .inner {
  background-color: blue;
}
.box ::after {
  content: '';
  background-color: yello;
}
.box > .inner2 {
  background-color: #fff;
}

.box {
  background-color: red;
}
.box .inner {
  background-color: blue;
}
.box::after {
  content: '';
  background-color: yello;
}
.box > .inner2 {
  background-color: #fff;
}

.box {
  background-color: red;
}
.box .inner {
  background-color: blue;
}
.box::after {
  content: '';
  background-color: yello;
}
.box.inner2 {
  background-color: #fff;
}