zoukankan      html  css  js  c++  java
  • css媒体查询

    先来段代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				background-color: grey;
    			}
    			@media only screen and (max- 960px) {
    				body{
    				background-color: red;
    			}
    			@media only screen and (max- 768px) {
    				body{
    				background-color: orange;
    			}
    			@media only screen and (max- 320px) {
    				body{
    				background-color: green;
    			}
    		</style>
    	</head>
    	<body>
    	</body>
    </html>
    

      上边用到了css的媒体查询,浏览器会根据视口的不同,来改变body的颜色。.媒体查询能使我们根据设备的各种功能特性来设定相应的样式。除此之外,还可以使用@import 指令在当前样式表中按条件引入其他样式表。@import url("phone.css") screen and(max-768px).[!!!:css的@import会增加http请求].

    媒体查询能检测哪些特性:

    最常用的是width(视口宽度)   device-width(屏幕宽度)

    除此之外还有:orientation(检查设备横向还是纵向)aspect-ratio(基于视口宽高比。一个16:9比例的显示屏可以这样 aspect-ratio:16/9)device-aspect-ratio(和aspect-ratio类似。)等。通常,面向“移动设备”用户使用max-device-width;面向“PC设备”用户使用max-width。

    用媒体查询改造我们的设计:

    css代表层叠样式表,就是指样式表后边的样式会覆盖前边的样式,因此我们可以先针对大视口设计,针对小视口再用媒体查询重写.

    加载媒体查询的最佳方法:

    @media screen and (max-768px){}.Respond.js为IE8及更低版本增加媒体查询,但是不支持@import.如果用link的话会增加http请求数量。

    内容参考:响应式Web设计 HTML5和CSS3实战。

  • 相关阅读:
    Jsp入门EL表达式_学习笔记
    sql-DDL, DML 常用语句
    sql-DDL, DML 常用语句
    sql-DDL, DML 常用语句
    sql-DDL, DML 常用语句
    谁需要GUI?快看Linux 终端生存之道
    谁需要GUI?快看Linux 终端生存之道
    谁需要GUI?快看Linux 终端生存之道
    谁需要GUI?快看Linux 终端生存之道
    2.3 根据层级查找元素
  • 原文地址:https://www.cnblogs.com/gaoxuerong123/p/6785613.html
Copyright © 2011-2022 走看看