<!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. python requests请求卡住问题

    最近经常接到别人反馈某个爬虫工具程序没有正常运行,需要下载的资讯数据也没有及时进行收录. 刚开始以为可能是机器的问题,偶尔机器会出现程序运行中途卡住的情况. 但随着异常的情况越来越频繁,我便只好去排查 ...

  2. centos下安装redis/mysql等基础环境

    1.修改语言 阿里云的ECS默认语言是:en_US.UTF-8,需要改成zh_CN.UTF-8 修改方法:vim /etc/locale.conf,然后重启. 查看方法:echo $LANG 2.安装 ...

  3. Codeforces Beta Round #2 C. Commentator problem

    模拟退火果然是一个非常高端的东西,思路神马的全然搞不懂啊~ 题目大意: 给出三个圆,求一点到这三个圆的两切线的夹角相等. 解题思路: 对于这个题来说还是有多种思路的 .只是都搞不明确~~   /害羞脸 ...

  4. ZOJ 3690 &amp; HDU 3658 （矩阵高速幂+公式递推）

    ZOJ 3690 题意: 有n个人和m个数和一个k,如今每一个人能够选择一个数.假设相邻的两个人选择同样的数.那么这个数要大于k 求选择方案数. 思路: 打表推了非常久的公式都没推出来什么可行解,好不 ...

  5. MongoDB + node-mongoskin简单演示样例

    特点 无模式 MongoDB 中的每一条文档,都是一个 JSON 对象,因此你无需提前定义一个集合的结构,集合中的每一个文档也能够有不同的结构. 异步写入 MongoDB 默认全部的写操作都是『不安全 ...

  6. Tools-->SQL Server Profiler监视数据库

    http://www.cnblogs.com/lorking/p/4062787.html https://docs.microsoft.com/en-us/sql/tools/sql-server- ...

  7. POJ 2374 线段树建图+Dijkstra

    题意: 思路: 线段树+Dijkstra(要堆优化的) 线段树要支持打标记 一个栅栏 拆成两个点 :左和右 新加一个栅栏的时候 看看左端点有没有被覆盖过 如果有的话 就分别从覆盖的那条线段的左右向当前 ...

  8. BZOJ 1572 贪心（priority_queue）

    思路: 维护两个堆 一个按时间 (从后到前)的 另一个是按价值(从大到小)的 从时间的堆向价值的堆倒 每回(合法状态下)取当前的堆顶 判一判 //By SiriusRen #include <q ...

  9. Spark MLlib回归算法LinearRegression

    算法说明 线性回归是利用称为线性回归方程的函数对一个或多个自变量和因变量之间关系进行建模的一种回归分析方法,只有一个自变量的情况称为简单回归,大于一个自变量情况的叫做多元回归,在实际情况中大多数都是多 ...

  10. LightOJ 1063 Ant Hills

    Ant Hills Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on LightOJ. Original ...