• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        css3 響應式媒體查詢的示例代碼

          發布時間:2019-09-25 14:17:46   作者:佚名   我要評論
        這篇文章主要介紹了css3 響應式媒體查詢的示例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下

        讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術,用于向不同的設備提供定制的樣式表。為了演示一個簡單的示例,我們可以更改不同設備的背景顏色

        /* 將body的背景顏色設置為tan */
        body {
          background-color: tan;
        }
        /* 在992px或更低的屏幕上,將背景顏色設置為藍色 */
        @media screen and (max-width: 992px) {
          body {
            background-color: blue;
          }
        }
        /* 在600px或更低的屏幕上,將背景顏色設置為橄欖色 */
        @media screen and (max-width: 600px) {
          body {
            background-color: olive;
          }
        }

        列的媒體查詢

        媒體查詢的常見用途是創建靈活的布局。在此示例中,我們創建的布局在四個,兩個和全寬列之間變化,具體取決于不同的屏幕大。

        .column {
          float: left;
          width: 25%;
        }
        /*在992px寬或更小的屏幕上,從四列到兩列 */
        @media screen and (max-width: 992px) {
          .column {
            width: 50%;
          }
        }
        /* 在寬度為600px或更小的屏幕上,使列堆疊在彼此之上而不是彼此相鄰*/
        @media screen and (max-width: 600px) {
          .column {
            width: 100%;
          }
        }

        使用媒體查詢更改字體大小

        您還可以使用媒體查詢來更改不同屏幕大小的元素的字體大。

        /* 如果屏幕大小超過600px寬,請將字體大小設置為80px */
        @media screen and (min-width: 600px) {
          div.example {
            font-size: 80px;
          }
        }
        /* 如果屏幕尺寸為600px或更小,請將字體大小設置為30px */
        @media screen and (max-width: 600px) {
          div.example {
            font-size: 30px;
          }
        }

        使用附加值:在下面的示例中,我們使用逗號向我們現有的媒體查詢添加其他媒體查詢(這將像OR運算符一樣):例如當寬度介于600px和900px之間或高于1100px時 - 改變外觀

        @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
          div.example {
            font-size: 50px;
            padding: 50px;
            border: 8px solid black;
            background: yellow;
          }
        }

        總結

        以上所述是小編給大家介紹的css3 響應式媒體查詢的示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
        如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            晋城 | 海拉尔 | 西藏拉萨 | 武安 | 西藏拉萨 | 嘉峪关 | 赵县 | 辽阳 | 宜宾 | 德清 | 白山 | 淮安 | 新沂 | 泰州 | 乌海 | 柳州 | 鞍山 | 姜堰 | 黄冈 | 高雄 | 澳门澳门 | 梅州 | 南安 | 舟山 | 蓬莱 | 和县 | 嘉峪关 | 燕郊 | 丹东 | 云浮 | 宁国 | 玉林 | 柳州 | 保定 | 石狮 | 四川成都 | 青海西宁 | 如东 | 海宁 | 博罗 | 汝州 | 防城港 | 临汾 | 灌南 | 绵阳 | 丽江 | 内蒙古呼和浩特 | 泰州 | 林芝 | 临海 | 台州 | 崇左 | 吴忠 | 临汾 | 桐城 | 雄安新区 | 汉川 | 廊坊 | 邯郸 | 萍乡 | 楚雄 | 娄底 | 灵宝 | 庆阳 | 衡水 | 萍乡 | 榆林 | 黔南 | 三沙 | 偃师 | 黔西南 | 保定 | 招远 | 中卫 | 湖州 | 福建福州 | 台州 | 张家口 | 鹤壁 | 新沂 | 牡丹江 | 云浮 | 吴忠 | 灌云 | 绵阳 | 陵水 | 赣州 | 双鸭山 | 泰兴 | 东营 | 惠东 | 吉安 | 吉安 | 保山 | 昌吉 | 高雄 | 灵宝 | 邯郸 | 阿拉善盟 | 如东 | 博尔塔拉 | 四平 | 中卫 | 瓦房店 | 澳门澳门 | 广汉 | 宜都 | 潍坊 | 阿勒泰 | 玉林 | 余姚 | 大连 | 金坛 | 四川成都 | 白城 | 图木舒克 | 萍乡 | 营口 | 红河 | 海宁 | 十堰 | 洛阳 | 潮州 | 阿拉尔 | 漯河 | 顺德 | 台湾台湾 | 宝鸡 | 徐州 | 安庆 | 株洲 | 泸州 | 鞍山 | 山西太原 | 邹平 | 温岭 | 阿里 | 黑龙江哈尔滨 | 瑞安 | 山南 | 沧州 | 开封 | 黄南 | 儋州 | 馆陶 | 广元 | 湖北武汉 | 菏泽 | 东莞 | 灌云 | 丹东 | 临猗 | 吉安 | 霍邱 | 西藏拉萨 | 汕尾 | 滨州 | 大庆 | 廊坊 | 常德 | 日土 | 淮北 | 平凉 | 天水 | 赣州 | 燕郊 | 湛江 | 海南 | 桓台 | 白沙 | 梧州 | 巴音郭楞 | 岳阳 | 宁波 | 深圳 | 南京 | 珠海 | 钦州 | 泗阳 | 荆州 | 昌都 | 新余 | 延边 | 惠东 | 南京 | 湘潭 | 吉安 | 慈溪 | 昌吉 | 锦州 | 五指山 | 三沙 | 鹤岗 | 盐城 | 宁夏银川 | 辽阳 | 东营 | 黄石 | 大兴安岭 | 黑河 | 无锡 | 贺州 | 永康 | 简阳 | 仙桃 | 吉安 | 许昌 | 寿光 | 嘉峪关 | 菏泽 | 驻马店 | 鹤壁 | 烟台 | 宜昌 | 枣庄 | 黔东南 | 遂宁 | 莱州 | 湖北武汉 | 任丘 | 金华 | 长治 | 揭阳 | 锦州 | 河南郑州 | 玉环 | 安吉 | 临夏 | 仁怀 | 桐乡 | 玉溪 | 沛县 | 广西南宁 | 襄阳 | 淮南 | 武安 | 怀化 | 荆州 | 大庆 | 晋中 | 郴州 | 博尔塔拉 | 铜仁 | 河南郑州 | 沛县 | 岳阳 | 昆山 | 承德 | 潍坊 | 南阳 | 衢州 | 丹阳 | 长葛 | 陇南 | 慈溪 | 馆陶 | 临夏 | 海北 | 青海西宁 | 灵宝 | 石嘴山 | 自贡 | 定西 | 江西南昌 | 云南昆明 | 台山 | 绵阳 | 文山 | 桂林 | 宝应县 | 安吉 | 顺德 | 灵宝 | 鄂州 | 基隆 | 琼中 | 宿州 | 德宏 | 黄南 | 温州 | 云南昆明 | 毕节 | 泗洪 | 伊春 | 包头 | 鄂州 | 东方 | 安庆 | 公主岭 | 宁德 | 南通 | 库尔勒 | 山西太原 | 巴音郭楞 | 邢台 | 周口 | 燕郊 | 孝感 | 莒县 | 铁岭 | 石狮 | 咸阳 | 阿里 | 昌都 | 包头 | 平潭 | 白银 | 汕头 | 东海 | 广安 | 牡丹江 | 定西 | 包头 | 黄石 | 琼海 | 益阳 | 三门峡 | 锡林郭勒 | 衡阳 | 灌南 | 台北 | 汕头 | 亳州 | 九江 | 崇左 | 朝阳 | 汕头 | 灌云 | 建湖 | 通化 | 青州 | 南阳 | 山东青岛 | 宝应县 | 广西南宁 | 驻马店 | 石嘴山 | 汉中 | 绵阳 | 神农架 | 厦门 | 漯河 | 韶关 | 基隆 | 日照 | 保定 | 招远 | 湖州 | 广汉 | 三河 | 东海 | 乐山 | 海丰 | 开封 | 嘉兴 | 荆门 | 七台河 | 台南 | 金昌 | 海宁 | 台中 | 明港 | 黔东南 | 姜堰 | 松原 | 明港 | 林芝 | 昭通 | 兴安盟 | 崇左 | 昭通 | 巴彦淖尔市 | 乌海 | 灌南 | 茂名 | 万宁 | 东莞 | 包头 | 河源 | 呼伦贝尔 | 东台 | 玉溪 | 绥化 | 和县 | 临夏 | 伊犁 | 长垣 | 东阳 | 金昌 | 石嘴山 | 晋城 | 惠州 | 宿州 | 云南昆明 | 葫芦岛 | 余姚 | 乌兰察布 | 临夏 | 安顺 | 琼海 | 天水 | 日喀则 | 日照 | 禹州 | 林芝 | 济南 | 南阳 | 台山 | 阿坝 | 黑河 | 锦州 | 那曲 | 亳州 | 昭通 | 昌吉 | 宁国 | 海南海口 | 抚顺 | 鄂尔多斯 | 平潭 | 西藏拉萨 | 博尔塔拉 | 大丰 | 淄博 | 昆山 | 咸阳 | 枣阳 | 宜都 | 赤峰 | 雅安 | 三沙 | 张家界 | 延安 | 三沙 | 保定 | 莆田 | 防城港 | 莱芜 | 山东青岛 | 垦利 | 蓬莱 | 临海 | 梧州 | 潮州 | 义乌 | 泗阳 | 荆州 | 茂名 | 日喀则 | 巢湖 | 包头 | 肇庆 | 济南 | 惠州 | 平凉 | 齐齐哈尔 | 青海西宁 | 天水 | 乌兰察布 | 武安 | 沭阳 | 东莞 | 那曲 | 济宁 | 牡丹江 | 肥城 | 吐鲁番 | 偃师 | 眉山 | 黄南 | 丽水 | 酒泉 | 烟台 | 琼中 | 儋州 | 莱州 | 湖北武汉 | 柳州 | 温州 | 贵港 | 衢州 | 澳门澳门 | 临沧 | 长葛 | 明港 | 莱芜 | 五指山 | 兴安盟 | 安康 | 衡阳 | 潜江 | 黄南 | 滁州 | 恩施 | 泗阳 | 清徐 | 伊犁 | 舟山 | 汝州 | 阳春 | 伊犁 | 遵义 | 邢台 | 黄冈 | 白山 | 仁怀 | 宜昌 | 抚顺 | 汕尾 | 眉山 | 阿勒泰 | 乳山 | 河南郑州 | 汕尾 | 克孜勒苏 | 芜湖 | 泰兴 | 博尔塔拉 | 天长 | 宁国 | 吴忠 | 汉川 | 乌兰察布 | 武安 | 莒县 | 湖南长沙 | 吐鲁番 | 玉环 | 毕节 | 新乡 | 宝应县 | 曲靖 | 广西南宁 | 余姚 | 定州 | 芜湖 | 桐乡 | 招远 | 台州 | 澄迈 | 宜春 | 漳州 | 抚顺 | 平顶山 | 象山 | 佳木斯 | 通化 | 自贡 | 荆门 | 如皋 | 景德镇 | 河源 | 吉林 | 武威 | 义乌 | 安徽合肥 | 鞍山 | 霍邱 | 漯河 | 北海 | 黄南 | 信阳 | 永新 | 龙口 | 宁德 | 乌海 | 黄南 | 兴化 | 甘肃兰州 | 正定 | 株洲 | 鹤壁 | 湛江 | 兴化 | 五家渠 | 宜昌 | 运城 | 锡林郭勒 | 阿拉善盟 | 上饶 | 宜昌 | 馆陶 | 博尔塔拉 | 哈密 | 大兴安岭 | 宁德 | 张北 | 海南 | 桓台 | 儋州 | 神农架 | 崇左 | 泸州 | 乐平 | 广州 | 临猗 | 定西 | 曲靖 | 海南 | 文山 | 西藏拉萨 | 秦皇岛 | 湖南长沙 | 临夏 | 湖南长沙 | 连云港 | 唐山 | 果洛 | 白山 | 诸城 | 福建福州 | 鞍山 | 来宾 | 南京 | 邯郸 | 明港 | 福建福州 | 新余 | 嘉峪关 | 晋江 | 溧阳 | 大同 | 七台河 | 大连 | 承德 | 吉安 | 海丰 | 阳泉 | 昌吉 | 天水 | 东营 | 昌吉 | 盘锦 | 张掖 | 株洲 | 佛山 | 晋江 | 广饶 | 抚顺 | 南京 | 安吉 | 安阳 | 黔西南 | 石狮 | 来宾 | 深圳 | 琼海 | 绍兴 | 曲靖 | 东台 | 姜堰 | 黔西南 | 伊犁 | 迪庆 | 神木 | 襄阳 | 灵宝 | 汉中 | 南京 | 大理 | 抚顺 | 淄博 | 陇南 | 宿州 | 金华 | 青海西宁 | 吴忠 | 绵阳 | 仁怀 | 抚顺 | 台南 | 象山 | 吉林 | 汉川 | 宿迁 | 万宁 | 龙口 | 武威 | 溧阳 | 泰兴 | 唐山 | 南通 | 霍邱 | 大兴安岭 | 迁安市 | 阿拉善盟 | 诸暨 | 诸暨 | 凉山 | 枣阳 | 红河 | 泸州 | 许昌 | 宁德 | 定西 | 桓台 | 保定 | 清徐 | 绵阳 | 泗阳 | 怀化 | 香港香港 | 焦作 | 襄阳 | 海丰 | 通辽 | 德宏 | 南平 | 阿拉善盟 | 揭阳 | 台北 | 四平 | 海安 | 喀什 | 安阳 | 邯郸 | 鹰潭 | 呼伦贝尔 | 建湖 | 漯河 | 沧州 | 延安 | 泗阳 | 商洛 | 山东青岛 | 漳州 | 宁德 | 玉树 | 汝州 | 鸡西 | 驻马店 | 南京 | 库尔勒 | 庄河 | 乌兰察布 | 哈密 | 沧州 | 滨州 | 临汾 | 邵阳 | 咸宁 | 台南 | 桐乡 | 乌兰察布 | 商洛 | 绍兴 | 双鸭山 | 岳阳 | 果洛 | 山南 | 遵义 | 莱州 | 临海 | 宁波 | 台山 | 丹阳 | 铜陵 | 渭南 | 海宁 | 惠州 | 伊犁 | 铜川 | 荣成 | 乳山 | 青海西宁 | 仁怀 | 石嘴山 | 沧州 | 台湾台湾 | 亳州 | 仁怀 | 崇左 | 达州 | 新余 | 三门峡 | 丹阳 | 招远 | 吴忠 | 林芝 | 邢台 | 嘉兴 | 邯郸 | 大连 | 铁岭 | 汉中 | 济宁 | 沛县 | 姜堰 | 七台河 | 乐山 | 庄河 | 铜陵 | 神木 | 招远 | 许昌 | 日土 | 泗洪 | 衡水 | 酒泉 | 咸阳 | 文山 | 湘潭 | 安庆 | 香港香港 | 昭通 | 邵阳 | 常德 | 平顶山 | 洛阳 | 衡水 | 垦利 | 溧阳 | 渭南 | 晋江 | 黄山 | 许昌 | 金坛 | 新乡 | 庄河 | 招远 | 东方 | 昆山 | 内蒙古呼和浩特 | 鹤壁 | 德清 | 漳州 | 枣庄 | 蚌埠 | 阜新 | 雅安 | 海北 | 项城 | 河南郑州 | 韶关 | 三沙 | 茂名 | 玉树 | 烟台 | 衡水 | 肥城 | 淮南 | 克孜勒苏 | 东海 | 泰州 | 吴忠 | 通化 | 武威 | 定安 | 正定 | 台中 | 岳阳 | 临海 | 齐齐哈尔 | 三亚 | 石嘴山 | 平潭 | 深圳 | 来宾 | 瑞安 | 连云港 | 贺州 | 台北 | 锦州 | 衢州 | 徐州 | 青海西宁 | 克拉玛依 | 涿州 | 仙桃 | 贺州 | 铁岭 | 濮阳 | 阜阳 | 东方 | 吕梁 | 海门 | 十堰 | 福建福州 | 白银 | 沛县 | 延边 | 淮安 | 海安 | 宜宾 | 固原 | 云南昆明 | 运城 | 单县 | 南阳 | 沧州 | 武夷山 | 海宁 | 台州 | 西双版纳 | 温州 | 崇左 | 新余 | 图木舒克 | 抚州 | 德阳 | 阿拉尔 | 广饶 | 定州 | 任丘 | 扬中 | 白城 | 钦州 | 万宁 | 临猗 | 台山 | 兴安盟 | 乌海 | 红河 | 菏泽 | 溧阳 | 伊犁 | 湖北武汉 | 中卫 | 东台 | 咸宁 | 珠海 | 淮北 | 德州 | 珠海 | 郴州 | 通辽 | 鄢陵 | 自贡 | 肥城 | 日喀则 | 赣州 | 迁安市 | 巴中 | 阿克苏 | 台州 | 大庆 | 醴陵 | 邹城 | 吕梁 | 崇左 | 红河 | 灌南 | 昭通 | 禹州 | 德宏 | 长兴 | 邯郸 | 秦皇岛 | 双鸭山 | 广汉 | 庆阳 | 毕节 | 潮州 | 德州 | 安吉 | 铜陵 | 铁岭 | 河源 | 内蒙古呼和浩特 | 西藏拉萨 | 阿克苏 | 诸暨 | 兴化 | 娄底 | 开封 | 商洛 | 邳州 | 青州 | 云浮 | 阿坝 | 永新 | 新沂 | 马鞍山 | 启东 | 锡林郭勒 | 九江 | 新余 | 宁波 | 贵港 | 辽阳 | 葫芦岛 | 邵阳 | 鹤壁 | 中卫 | 南通 | 灌云 | 南京 | 高雄 | 泰州 | 宜昌 | 定西 | 台中 | 昆山 | 毕节 | 安徽合肥 | 荆门 | 灵宝 | 图木舒克 | 任丘 | 金坛 | 阜阳 | 甘南 | 广安 | 张北 | 沛县 | 禹州 | 文昌 | 白沙 | 邹城 | 武安 | 铜仁 | 漳州 | 朔州 | 凉山 | 赣州 | 承德 | 赵县 | 抚顺 | 达州 | 保亭 | 曹县 | 吴忠 | 安顺 | 诸暨 | 无锡 | 湘潭 | 库尔勒 | 澄迈 | 阿里 | 南京 | 澄迈 | 呼伦贝尔 | 山南 | 长兴 | 海安 | 东海 | 襄阳 | 保定 | 河源 | 简阳 | 吕梁 | 保山 | 白山 | 中山 | 聊城 | 东台 | 山西太原 | 东方 | 昌吉 | 运城 | 遂宁 | 庆阳 | 安吉 | 日喀则 | 澳门澳门 | 柳州 | 白城 | 图木舒克 | 滁州 | 基隆 | 孝感 | 三明 | 赵县 | 迁安市 | 临沂 | 鹤岗 | 宝鸡 | 吴忠 | 安阳 | 三河 | 黄山 | 中卫 | 绍兴 | 玉树 | 塔城 | 和田 | 佳木斯 | 武夷山 | 巴中 | 黄石 |