媒体查询(前端面试题)

一个小游戏的公司的前端面试题

效果演示.gif

考点

  • 基础的布局知识, 左侧浮动脱离标准流, 右侧margin-left 设置为左侧宽度,即可快速实现左右布局
  • 媒体查询, 媒体查询可以根据屏幕尺寸的变化,进行动态适配,语法为@margin (条件) {}

解法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面试题</title>

    <style>
        body{
            margin: 0;
        }

        #header{
            width: 100%;
            height: 200px;
            background-color: #33ccff;
        }

        #left_con{
            float: left;
            width: 100px;
            height: 1000px;
            background-color: #ffcc99;
        }

        #right_con{
            margin-left: 100px;
            width: 100%;
            height: 1000px;
            background-color: #823384;
        }


        /*要及时覆盖上面的样式*/
        @media (max-width: 700px) {

            #header{
                width: 100%;
                height: 50px;
                background-color: #33ccff;
            }

            #left_con{
                
                width: 0;
            }

            #right_con{
                width: 100%;
                margin-left: 0;
                background-color: #823384;
            }


        }

    </style>

</head>
<body>

    <div id="header">


    </div>


    <div id="con">
        <div id="left_con">

        </div>
        <div id="right_con">

        </div>
    </div>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

821130
来自专栏Coco的专栏

【CSS进阶】伪元素的妙用--单标签之美

296120
来自专栏HTML5学堂

IE6已逝,遗忘在角落的选择器,赶快用起来

那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍...

28990
来自专栏前端萌媛的成长之路

CSS常见布局

20420
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

44760
来自专栏pangguoming

html5调用手机陀螺仪实现方向辨识

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

35710
来自专栏互联网杂技

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

42550
来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

12320
来自专栏web编程技术分享

三分钟学会用 js + css3 打造酷炫3D相册

85150
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12060

扫码关注云+社区

领取腾讯云代金券