<!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. 使用java自带的xml解析器解析xml

    使用java自带的xml解析器解析xml,其实我不推荐,可以用Dom解析,或其他的方式,因为Java自带的解析器使用不但麻烦,且还有bug出现. 它要求,针对不同的xml(结构不同),必须写对应的ha ...

  2. tcpg通信

    1.客户端 from socket import * def main(): # 创建套接字 tcp_socket = socket(AF_INET,SOCK_STREAM) # 链接服务端 ip = ...

  3. MySQL Field排序法

    检索 id = 2 or id = 5 or id = 9 or id = 56 or id = 38.然后按照 2 , 5, 9, 56, 38 这个顺序排列,这是题目要求   以下为解决方案: 1 ...

  4. 洛谷 P3913 车的攻击

    P3913 车的攻击 题目描述 N \times NN×N 的国际象棋棋盘上有KK 个车,第ii个车位于第R_iRi​行,第C_iCi​ 列.求至少被一个车攻击的格子数量. 车可以攻击所有同一行或者同 ...

  5. C语言之基本算法39—字符串经典操作

    //字符串概念! /* ================================================================== 题目:练习字符串的 1.输入输出      ...

  6. OpenCASCADE Face Normals

    OpenCASCADE Face Normals eryar@163.com Abstract. 要显示一个逼真的三维模型,其顶点坐标.顶点法向.纹理坐标这三个信息必不可少.本文主要介绍如何在Open ...

  7. package-判断安装应用是否存在

    今天在修改一个bug的时候,遇到一个问题,就是一个应用卸载了以后,在超级用户权限界面仍然会加载进来这个应用的相关信息.自己修改的时候,为了方便,就直接使用了里面一个加载图标的代码作为条件,也就是说,如 ...

  8. Python 数据结构与算法 —— 哈弗曼树

    1. 从扩充二叉树到哈弗曼树 扩充二叉树:对二叉树 T,加入足够多的新叶节点(而不是任意),使 T 的原有结点都变成度数为 2 的分支节点,得到的二叉树称为 T 的扩充二叉树. 对于扩充二叉树而言, ...

  9. Scott Hanselman的问题-1

    Scott Hanselman的问题 .Net 程序员面试 C# 语言篇 (回答Scott Hanselman的问题)   过去几年都在忙着找项目,赶项目,没有时间好好整理深究自己在工作中学到的东西. ...

  10. 洛谷P3383 【模板】线性筛素数(Miller_Rabin)

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行 ...