<!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 701 B. Cells Not Under Attack

    B. Cells Not Under Attack time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  2. 基于CANopen DSP402的运动控制笔记

    常用的mode of operation 有以下几种: 控制字 control word: 6--------------7---------------15--------------------7 ...

  3. excel操作小技巧

    excel拼接sql语句时,时间格式问题 问题:若直接插入时间的单元格 :="insert into t_entity_car (create_time,name,age) value (' ...

  4. UTC时间 GMT时间 本地时间 北京时间 时区 夏令时简要说明

    1.UTC时间 与 GMT时间 整个地球分为二十四时区,每个时区都有自己的本地时间.为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated). ...

  5. Python正则表达式初识（二）

    前几天给大家分享了Python正则表达式初识(一),介绍了正则表达式中的三个特殊字符“^”.“.”和“*”,感兴趣的伙伴可以戳进去看看,今天小编继续给大家分享Python正则表达式相关特殊字符知识点. ...

  6. ZOJ 2532 Internship

    Internship Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original ID: ...

  7. Linux中配置网桥

    使用kvm虚拟机时,有时候需要自己添加网桥供guest使用. 不使用libvirt来管理的话,可以使用以下方法创建网桥并绑定到物理网卡(RHEL6/Fedora已实验): 1.创建网桥配置文件ifcf ...

  8. Bounding Volume Hierarchy BVH in OpenCASCADE

    Bounding Volume Hierarchy BVH in OpenCASCADE eryar@163.com Abstract. Bounding Volume Hierarchy(BVH) ...

  9. Oracle-02-数据库概述

    一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...

  10. Android自己定义动态布局 — 多图片上传

    Android自己定义动态布局 - 多图片上传 本文介绍Android中动态布局加入图片,多图片上传. 项目中效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...