当前位置：网站首页>响应式移动Web测试题

响应式移动Web测试题

2022-07-04 06:41:00 【HHppGo】

第一题

下列选项中对bootstrap中的能让元素只在小屏设备隐藏的类是( B )

A： hidden-xs

B： hidden-sm

C： hidden-md

D： hidden-lg

解析：hidden-xs是超小屏；hidden-sm是小屏；hidden-md是中屏；hidden-lg是大屏

第二题

下列选项中能清除父容器左右15px内边距的类是( D )

A： container

B： col-md-1

C： container-fluid

D： row

解析：container是设置版心效果；col-md-1是在中屏上一行显示12个；container-fluid是通栏效果；row是消除父容器左右15px的内边距

第三题

下列关于bootstrap的使用描述错误的是( C )

A： Bootstrap下载的包里面有css，js，font文件夹

B： <!–[if lt IE 9]> 这个是针对低版本ie浏览器的兼容处理

C： Bootstrap只能通过浏览器下载的本地文件形式引入项目里面 解析：（通过cdn在线加速也可以）

D：引入了对应的bootstrap.css就可以直接使用它提供的一些类

第四题

在超大屏上面每行显示4个元素，中等屏幕上显示3个元素，小屏上显示2个元素，超小屏幕上显示1个元素。下列关于不同屏幕下类名的书写正确的是( A )

<div class="row">
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
</div>

<div class="row">
      <div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">1</div>
</div>

<div class="row">
      <div class="col-lg-3 col-md-4 col-sm-2 col-xs-1">1</div>
</div>

<div class="row">
      <div class="col-lg-3">1</div>
</div>

解析：col-xs是超小屏；col-sm是小屏；col-md是中屏；col-lg是大屏；用12除以每行要显示的元素个数，就是后面的数字了

第五题

<style> @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: green; color: #fff; text-align: center; line-height: 1rem; } </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

上面案例中的top元素在屏幕宽度为500px和700px时字体大小分别是多少( D )

A： 25px 25px

B： 50px 50px

C： 16px 16px

D： 25px 50px

解析：

如图所示：min-width:320px 意思是大于等于320px,(即：最小是320px);
同理，max-width:某某px 意思是小于等于某某px，（即：最大是某某px）
图中：>=640px的样式把>=320px样式中>=640的部分给覆盖了
因此，屏幕宽度为500px的html字体大小是font-size:50px
屏幕宽度为700px的html字体大小是font-size:100px
又因为rem是以html字号大小为一个单位的，即：1rem = 1 * HTML字号大小
因此，最后结果：用html字体大小再分别乘以0.5，即是最后的答案。
注：.5rem == 0.5rem

第六题

关于Bootstrap的选项错误的是( C )

A： Bootstrap 的初始化代码使用的是 normalize.css

B： Bootstrap 是移动设备优先的，为了确保适当的绘制和触屏缩放，需要在 head标签之中添加 viewport 元数据标签

C：处于中等屏幕时，使用.col-md-表示，.container 最大宽度1170px

D：列偏移，col-*-offset-实现原理是使用margin-left进行实现的

解析：
中等屏幕，对应的容器宽度是 970px

第七题

以下代码中，哪一个可以使用媒体查询判断宽度（768px~992px）并引入对应css文件( C )

A： <link rel="stylesheet" href="one.css">

 B： <link rel="stylesheet" media="screen and ( min-width:992px )" href="two.css">

 C： <link rel="stylesheet" media="screen and ( max-width:992px ) and ( min-width:768px )" href="three.css">

 D： <link rel="stylesheet" media="screen and ( min-width:992px ) and ( max-width:768px )" href="three.css">