育才学习网响应式高度怎么写
1.学写响应式网站,应该要怎么写
1、学习CSS3的基础知识。
2、学习相关的媒体查询，如拼图前端框架对屏幕大小的响应方式：
@media (min-width:760px){.container{width:750px;}}
@media (min-width:1000px){.container{width:1000px;}}
@media (min-width:1200px){.container{width:1200px;}}
分别是平板、桌面、宽屏下的.container下的宽度。
3、学习下网格系统，具体可参考：5响应式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纵向：2.2非纵向：2.3只有视口宽度大于800像素的显示屏才加载文件2.4 查询列表中任意一个查询为真，则加载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.//width=device-width 浏览器页面的宽度应该等于设备宽度//maximum-scale 将页面放大禁止缩放：width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放5.拥抱流式布局5.1 公式：目标元素宽度÷上下文元素宽度=百分比宽度5.2 em替换px 公式：目标元素尺寸÷上下文元素尺寸=百分比尺寸。
转载请注明出处育才学习网 » 响应式布局怎么写