当前位置：网站首页>Responsive mobile web test questions

Responsive mobile web test questions

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

The first question is

Of the following options bootstrap The classes in that allow elements to be hidden only on small screen devices are ( B )

A： hidden-xs

B： hidden-sm

C： hidden-md

D： hidden-lg

analysis ：hidden-xs It's a super small screen ;hidden-sm It's a small screen ;hidden-md It's the middle screen ;hidden-lg It's a big screen

The second question is

The following options can clear the left and right of the parent container 15px The class of inner margin is ( D )

A： container

B： col-md-1

C： container-fluid

D： row

analysis ：container Is to set the layout effect ;col-md-1 It is displayed in one line on the middle screen 12 individual ;container-fluid It's a barrier effect ;row Is to eliminate the parent container around 15px The inner margin of

Third question

The following about bootstrap Usage description of error Yes. ( C )

A： Bootstrap The downloaded package contains css,js,font Folder

B： <!–[if lt IE 9]> This is for the lower version ie Browser compatible processing

C： Bootstrap It can only be imported into the project in the form of local files downloaded by the browser analysis ：（ adopt cdn Online acceleration is also ok ）

D： The corresponding bootstrap.css You can directly use some of the classes it provides

Fourth question

On the super large screen, each line displays 4 Elements , On the medium screen 3 Elements , The small screen shows 2 Elements , On the super small screen 1 Elements . The following descriptions of class names under different screens are correct ( 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>

analysis ：col-xs It's a super small screen ;col-sm It's a small screen ;col-md It's the middle screen ;col-lg It's a big screen ; use 12 Divide by the number of elements to be displayed in each row , That's the next number

Fifth question

<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"> The shopping cart </div>
</body>

In the case above top The element has a screen width of 500px and 700px when What are the font sizes ( D )

A： 25px 25px

B： 50px 50px

C： 16px 16px

D： 25px 50px

analysis ：

As shown in the figure ：min-width:320px intend Greater than or equal to 320px,( namely ： The minimum is 320px);
Empathy ,max-width: So-and-so px intend Less than or equal to px,（ namely ： The biggest is so and so px）
In the figure ：>=640px Style handle >=320px In the style >=640 Part of For coverage.
therefore , The screen width is 500px Of html font size yes font-size:50px
The screen width is 700px Of html font size yes font-size:100px
Again because rem In order to html Size For a unit of , namely ：1rem = 1 * HTML Size
therefore , The final results ： use html font size Multiply by 0.5, That's the final answer .
notes ：.5rem == 0.5rem

Sixth question

About Bootstrap The option to error Yes. ( C )

A： Bootstrap The initialization code of uses normalize.css

B： Bootstrap Mobile first , To ensure proper drawing and touch screen zooming , Need to be in head Add viewport Metadata tags

C： On the medium screen , Use .col-md- Express ,.container Maximum width 1170px

D： Column offset ,col-*-offset- The implementation principle is to use margin-left Implemented

analysis ：
Medium screen , The corresponding container width is 970px

Question seven

In the following code , Which one can use media query to determine the width （768px~992px） And introduce corresponding css file ( 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">

analysis ：max-width: 992px intend Viewport width <=992px;
min-width: 768px intend Viewport width >=768px;

The eighth question [ multi-select ]

bootstrap Class col-sm-4 describe correct Yes. (BC )

A： It only works on small screen devices

B： Effective on small screen equipment and above

C： When effective, the width accounts for 1/3

D： When effective, the width accounts for 1/4

Question 9 [ multi-select ]

The following description of the layout container correct Yes. (ABC )

A： Bootstrap Two container style classes are predefined ：.container, .container-fluid

B： container class , The screen range has been processed through media query

C： container-fluid, The width is 100% , Suitable for separate mobile terminal development

D： container Class is not responsive

Question 10 [ multi-select ]

The following is a description of the grid system correct Yes. ( ABC )

A： The lattice system is used to pass through a series of rows （row） And column （column） To create a page layout

B： grid system , Along with the screen or the viewport （viewport） Increase in size , The system will automatically divide it into the most 12 Column

C： Screen change ,container change ,12 Every change in equal parts , The size of our interface elements is set according to each equal part , Then the screen adaptation is realized

D： The grid system is container class

原网站

版权声明
本文为[HHppGo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/185/202207040640450793.html