JS 响应式布局
1、media
效果为屏幕宽度变化时，背景颜色也变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (max-width: 1024px){
.bg{
background-color: aqua;
}
}
@media screen and (max-width: 980px) {
.bg {
background-color: red;
} }
@media screen and (max-width: 720px) {
.bg {
background-color: yellow;
} } @media screen and (max-width: 640px) {
.bg {
background-color: green;
} } @media screen and (max-width: 320px) {
.bg {
background-color: darkgray;
} }
</style>
</head>
<body class="bg"> </body>
</html>
2. 弹性图片
样式如下面的code
.img 和 img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (max-width: 1024px){
.bg{
background-color: aqua;
}
}
@media screen and (max-width: 980px) {
.bg {
background-color: red;
} /*使用流体图片*/
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
position: absolute;
width:600px;
top:-25%;
} .img{
height: 200px;
border:1px solid sandybrown;
overflow:hidden;
margin-bottom:10px;
display: block;
position: relative;
} }
@media screen and (max-width: 720px) {
.bg {
background-color: yellow;
} } @media screen and (max-width: 640px) {
.bg {
background-color: green;
} } @media screen and (max-width: 320px) {
.bg {
background-color: darkgray;
} }
</style>
</head>
<body class="bg">
<div style="margin-top: 300px" class="img">
<img src="data:image/img1.jpg" />
</div>
</body>
</html>
JS 响应式布局的更多相关文章
- rem+js响应式布局的设置
直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...
- js响应式布局
<!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF- ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- 利用JS去做响应式布局
利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- 用JS更好的实现响应式布局
响应式布局更加高效的方法: 代码实现 <script> $(function() { (function(){ var $html = $('html'); var $window = $ ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- Apache Tomcat 6.0 Tomcat6 服务因 1 (0x1) 服务特定错误而停止
1.Tomcat目录下的bin
- 提高C++程序运行效率的10个简单方法
转载: 一.尽量减少值传递,多用引用来传递参数.至于其中的原因,相信大家也很清楚,如果参数是int等语言自定义的类型可能能性能的影响还不是很大,但是如果参数是一个类的对象,那么其效率问题就不言而喻了. ...
- Python gui编程pyQt5安装步骤
Python gui编程pyQt5安装步骤 =============================== -m PyQt5.uic.pyuic $FileName$ -o $FileNameWit ...
- PatePoco中对sql参数化时Top参数化的问题
PatePoco中对sql参数化是直接用@+参数名来处理,但是想用如下语句时竟然报错了 SELECT TOP @num * FROM tableA 执行时抛出异常,根据错误提示搞了很久都没找到原因,最 ...
- golang模拟动态高优先权优先调度算法
实验二 动态高优先权优先调度 实验内容 模拟实现动态高优先权优先(若数值越大优先权越高,每运行一个时间单位优先权-n,若数值越小优先权越高,没运行一个时间单位优先权+n),具体如下: 设置进程体:进 ...
- C语言、编程语言发展史
前言 了解和学习一门语言.一个系统乃至方方面面的任何东西时,如果不知道其历史和现状而只是一上来就一味地闷头苦学,你就很容易“一叶障目不见泰山”. 如此这般火急火燎的就上手苦干,私以为大错特错,所谓“学 ...
- 【转】Linux编程之UDP SOCKET全攻略
转自:http://www.cnblogs.com/skyfsm/p/6287787.html?utm_source=itdadao&utm_medium=referral 这篇文章将对lin ...
- L1-011 A-B
本题要求你计算A−B.不过麻烦的是,A和B都是字符串 —— 即从字符串A中把字符串B所包含的字符全删掉,剩下的字符组成的就是字符串A−B. 输入格式: 输入在2行中先后给出字符串A和B.两字符串的长度 ...
- 玩转树莓派：OpenHAB的入门（一）
如果你对那些仅仅只是为了控制一盏灯而不得不下载一个特定的App的智能家居感到厌烦,这里有个好消息:OpenHAB可以为你实现最灵活的控制智能家居,OpenHAB是一个成熟的,开源的家庭自动化平台,既可 ...
- 【c++基础】vector中按照Point类型某一个变量进行排序
code // sort(a.begin(), a.end(), cmpy); //subfunction bool cmpy(cv::Point const& a, cv::Point co ...