文档章节

响应式布局原理,media query媒体查询简单写法

itlyj
 itlyj
发布于 2016/09/19 23:01
字数 383
阅读 151
收藏 0
1. 第一种写法
 <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            /*在固定布局中*/
            width: 1200px;
            height: 1200px;
            background-color: pink;
            margin: 0 auto;
        }

        /*利用media query 查询屏幕*/
        /*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
        /*and  与后面的条件之间要有空格*/
        @media screen and (min-width: 1200px) {
            .container{
                background: blue;
                width: 1170px;
            }
        }
        /*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
        @media screen and (min-width: 992px) and (max-width: 1200px){
            .container{
                background: red;
                width: 970px;
            }
        }
        /*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
        @media screen and (min-width: 768px) and (max-width:992px){
            .container{
                background: green;
                width: 750px;
            }
        }
        /*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
        @media screen and (max-width:768px){
            .container{
                background:yellow ;
                width: 100%;
            }
        }
2. 第二种写法
       <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            /*在固定布局中*/
            width: 1200px;
            height: 1200px;
            background-color: pink;
            margin: 0 auto;
        }
        /*利用media query 查询屏幕*/
        /*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
            .container{
                background:yellow ;
                width: 100%;
            }

        /*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
        @media (min-width: 768px){
            .container{
                background: green;
                width: 750px;
            }
        }
        /*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
        @media (min-width: 992px){
            .container{
                background: red;
                width: 970px;
            }
        }
        /*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
        @media(min-width: 1200px) {
            .container{
                background: blue;
                width: 1170px;
            }
        }

 

© 著作权归作者所有

itlyj
粉丝 2
博文 35
码字总数 13498
作品 0
海淀
程序员
私信 提问
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
159
0
web前端响应式设计总结

一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到...

ouven
2016/01/17
3.9K
2
用百分比布局和媒体查询@media来实现响应式网页的编码

开场白 最近在看网页响应式设计方面的书,学习了些响应式网页设计编码方面的皮毛,拿来献丑,也记录下来给自己以后备忘,前端达人路过看到轻喷。 写了这么多年的Java代码,发现现在看前端的书...

英强
2016/09/29
1K
0
2015-2016前端体系技术图谱

2015-2016前端架构体系技术 进入github查看大图 点击查看完整版 一、框架与组件  **bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset、按钮、图片、菜单、表单 ...

ouven
2016/01/26
18.5K
43
前端适配:移动端/web端适配方案

科普: rem 1.通过媒体查询的方式:css3的media queries 优点: media query 可以做到设备像素比的判断,方法简单,成本较低,特别是对于PC端和移动端维护同一套代码的时候;Bootstrap框架就...

GeekQiaQia
04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向海量数据的极致成本优化-云HBase的一体化冷热分离

前言 随着业务的持续发展,业务数据库存储量会持续增长。通常数据量过亿时,就需要考虑做分库分表,或者选择扩展能力更好的NOSQL/NewSQL数据库,如HBase就可以单表支持PB级数据,足够满足大多...

阿里云官方博客
34分钟前
4
0
最新最全国内外架构开源技术干货资料

大家好,废话不多说,整理了精心收集了各类资源。 声明,如侵犯个人利益,请联系小编,会立即删除相关资料。 领取方式在文末 求转发列表 好了,由于资源太多啦,就不一一列举了。 大家按照下...

泥瓦匠BYSocket
36分钟前
6
0
springmvc jsp访问不了css

在jsp中引入css,一直报404错误,直接访问css,也无法访问 将css文件移出WEB-INF,因为处于安全性考虑,这个目录禁止外部访问。 当引用css时,可以直接用绝对路径${pageContext.request.conte...

沉迷于编程的小菜菜
38分钟前
4
0
android 系统版本 9.1网络请求遇到坑

网络请求异常: E/http: CLEARTEXT communication to plat.xunlinkeji.cn not permitted by network security policy 在res下新建一个xml目录 创建名为network_security_config.xml 文件 ,该......

MrLins
56分钟前
5
0
Istio 1.3 发布,HTTP 遥测不再需要 Mixer

> 原文链接:Istio 1.3 发布,HTTP 遥测不再需要 Mixer Istio 是 Google、IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现、连接、管理、监控以及安全等问题...

米开朗基杨
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部