响应式背景怎么做

推荐回答

html5响应式Web设计常用代码$(function(){pullUp();function pullUp(){var objW = $(window);var objC = $("#wrapper");var brsW = objW.width();//var brsH = objW.height();//var sclL = objW.scrollLeft();//var sclT = objW.scrollTop();var curW = objC.width();//var curH = objC.height(); //计算对话框居中时的左边距var left = (brsW - curW) / 2;//var top = sclT + (brsH - curH) / 2;objC.css({"left":left,"top":47});}$(window).resize(function(){pullUp();});});一、媒体查询：支持不同的视口1.用CSS媒体查询body{background-color:red;}@media screen and (max-width:960px;){body{background-color:grey;}}@media screen and (max-width:768px;){body{background-color:orange;}}@media screen and (max-width:550px;){body{background-color:yellow;}}@media screen and (max-width:320px;){body{background-color:green;}} 2.CSS判断显示屏纵向2.1纵向：<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css" />2.2非纵向：<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css" />2.3只有视口宽度大于800像素的显示屏才加载文件<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css" />2.4 查询列表中任意一个查询为真，则加载<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="portrait-screen.css" /> 3.媒体查询检测特性@media screen and (max-width:320px;){h1{color:red}//屏幕宽度小雨320显示红色}//视口最大宽度为320像素的显示屏加载样式表@import url("phone.css") screen and (max-width:320px); width：视口宽度height：视口高度device-width：设备屏幕的宽度device-height：设备屏幕的高度orientation：检查设备横向还是纵向aspect-ratio：基于视口宽度和高度的宽高比（aspect-ratio：16/9）device-aspect-ratio：基于视口渲染平面宽高比color：没中颜色的位数，比如min-color:16 会检测设备是否拥有16位颜色color-index：设备颜色索引中的颜色数，必须是非负整数。 4.<!-- 告知浏览器页面如何展现，这里的值表示页面宽度与设备宽度一致，初始化不放大，且最大放大比例为1（即永远不放大）--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> //width=device-width 浏览器页面的宽度应该等于设备宽度//maximum-scale 将页面放大禁止缩放：<meta name="viewport" content="initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放5.拥抱流式布局5.1 公式：目标元素宽度÷上下文元素宽度=百分比宽度5.2 em替换px 公式：目标元素尺寸÷上下文元素尺寸=百分比尺寸