<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js响应式实例</title>
<style>
body {margin:;} .nav {
overflow: hidden;
background-color: #;
} .nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
} .nav a:hover {
background-color: #ddd;
color: black;
} .nav .icon {
display: none;
}
/*开始媒体查询,当屏幕小鱼750px;切换样式*/
@media screen and (max-width: 750px) {
.nav a:not(:first-child) {display: none;}/*主页选出来*/
.nav a.icon {
float: right;
display: block;
}
} @media screen and (max-width: 750px) {
.nav.res {position: relative;}
.nav.res .icon {
position: absolute;
right: ;
top: ;
}
.nav.res a {
float: none;
display: block;
text-align: left;
} }
</style>
</head>
<body>
<nav class="nav" id="mynav">
<a href="#">主页</a>
<a href="#">CSS</a>
<a href="#">HTML</a>
<a href="#">JavaScript</a>
<a href="#">node.js</a>
<a href="#">vue</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="show()">&#;</a>
</nav>
<div>
<h1>
响应式主要用到的是媒体查询@media screen
</h1>
</div>
</body>
<script>
function show() {
var x = document.getElementById("mynav");
if (x.className === "nav") {
x.className += " res";
} else {
x.className = "nav";
}
}
</script>
</html>

JS/CSS 响应式样式实例的更多相关文章

  1. CSS响应式布局实例

    <style type="text/css">        body{            margin:0 auto;            min-width: ...

  2. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

  3. CSS响应式布局到底是什么?

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  4. html响应式布局,css响应式布局,响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  5. IT兄弟连 HTML5教程 响应式布局实例

    在学习Media Queries模块前,先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用.在本例中,使用HTML5的结构元素定义了5个盒子.当浏览器窗口尺寸不同时 ...

  6. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  7. css - 响应式

    css - 响应式 移动设备尺寸 移动设备的尺寸各不相同,大体上可以做如下划分: 768px以下的是手机屏幕 768px-991px是平板ipad屏幕 992px-1199是大平板屏幕 1200极其以 ...

  8. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  9. Bulma CSS - 响应式

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

随机推荐

  1. c#(asp.net) 如何计算两个日期之间相隔天数

    1.DateTime t1 = Convert.ToDateTime("2006-1-6"); DateTime t2 = Convert.ToDateTime("200 ...

  2. Redux 总结

    1.redux: function reducer(state=-,action) { switch(action.type) { case '': return ... case '': retur ...

  3. android 动态设置TextView值,例:金额添加

    一说到动态递增设置TextView值,非常多人应该立即就想到起个线程,让后在线程中睡眠指定时间,使用handler发送消息更新TextView值! 这样是实现了动态递增设置TextView值可是效率不 ...

  4. POJ 1006 Biorhythms (数论-中国剩余定理)

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 111285   Accepted: 34638 Des ...

  5. 华为荣耀3C最新版ROM的root,(4.7.1和4.8.1等等通用方法)

    手头一台honor 3c的机器.应该是线刷的时候,把IMEI给刷掉了.导致移动2G卡无法上网. 刷了4.7.1或者4.8.1.尝试了全部方法都root失败了. 正好我手头有6582的代码.我想.既然系 ...

  6. SQLite详解,案例,手册

    SQLite 存储类型 1.NULL 2.INTEGER 3.REAL 4.TEXT 5.BLOB 创建表 CREATE TABLE COMPANY( ID INT PRIMARY KEY NOT N ...

  7. Looksery Cup 2015

    A题水 C题 博弈论,如果不是CF有WA具体哪个点错了和数据的话,AC要难许多. 如果D的操作数大于奇数个数直接Win 偶数个数大于等于n – k 时,S直接Win 偶数个数小于n – k时,若D操作 ...

  8. sql server 内置MD5加密函数

    http://blog.csdn.net/rookie_liu_ToFly/article/details/53116932 select right(sys.fn_VarBinToHexStr(HA ...

  9. jQuery过滤选择器具体解释

    基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("backgrou ...

  10. Android 上的 制表符(tab) —— 一个奇妙的字符 (二)

    接到上回的说,主要是上回那个问题,我认为是android的bug,黎叔认为是cocos2dx的bug,叫我去提交bug.所以我又继续研究了下. 上回说到会调用java层的函数去创建一个image,然后 ...