<!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. codeforces 589A Email Aliases(map)

    Description Polycarp has quite recently learned about email aliases. Of course, he used to suspect t ...

  2. 紫书 例题 9-4 UVa 116 ( 字典序递推顺序）

    这道题在递推方式和那个数字三角形有一点相像,很容易推出来 但是这道题要求的是字典序,这里就有一个递推顺序的问题 这里用逆推,顺推会很麻烦,为什么呢? 如果顺推的话,最后一行假设有种情况是最小值,那么你 ...

  3. Java技术——Java泛型详解（转）

    ); for (int i = 0; i < list.size(); i++) { String name = (String) list.get(i); //取出Integer时,运行时出现 ...

  4. win7安装python开发环境，执行python

    在win7上安装python的开发环境是很easy的事情 Step1:下载python安装文件 url:https://www.python.org/download 去这里找到你想要下载的文件 St ...

  5. php实现简单算法3

    php实现简单算法3 这篇文章主要介绍了PHP经典算法集锦,整理了各种常见的算法,包括排序.查找.遍历.运算等各种常见算法原理与实现技巧,需要的朋友可以参考下 1.首先来画个菱形玩玩,很多人学C时在书 ...

  6. mount 命令

    命令格式:mount [-t vfstype] [-o options] device dir 嵌入式设备挂载命令mount -o nolock -t nfs 192.168.1.24:/home/t ...

  7. GetInvocationList 委托链表

    最近发现C#程序初始化时在构造函数中,偶尔出现事件注册不成功.后查资料发现有GetInvocationList 这么一个获取类中的委托链表的函数, 使用方法如下: 1.在需委托的类(Class1)中增 ...

  8. JavaScript学习总结（11）——JS常用函数（二）

    37. getElementsByClassName ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getElementsByClassName( ...

  9. android-pulltorefresh 下拉载入中使用gif动图

    效果预览: xml布局 <com.handmark.pulltorefresh.library.PullToRefreshListView xmlns:android="http:// ...

  10. NB大了，增强现实走进安防行业了！竟然还有智能家居的规划！

     增强现实系统故事性功能解说 作者:李欢   工号:2288  电话:18938902295 邮箱:lihuan@gosuncn.com 前言: 本文仅适用于2014北京安防展,增强现实展区人员学 ...