<!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. [Chromium文档转载，第004章]Mojo Synchronous Calls

    For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Synchronous Calls Think carefully before ...

  2. CodeChef November Challenge 2013 部分题解

    http://www.codechef.com/NOV13 还在比...我先放一部分题解吧... Uncle Johny 排序一遍 struct node{ int val; int pos; }a[ ...

  3. 控制div固定在页面的某个位置 ，用js感觉很麻烦 CSS更好一些

    CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...

  4. 36Kr众筹项目比呀比biyabi，调查分析研究报告，背后资方势力的关系梳理

    36Kr众筹项目比呀比biyabi调查报告 个层次的评价.   变革家-比呀比拆解报告:http://biangejia.com/archives/12653 8.其它 没有通过微信,参加路演,有点遗 ...

  5. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  6. @MapperScan 和 @ComponentScan 区别

    1.首先@MapperScan和@ComponentScan都是扫描包 2.@ComponentScan是组件扫描注解,用来扫描@Controller  @Service  @Repository这类 ...

  7. 改动GDAL库支持RPC像方改正模型

    近期在做基于RPC的像方改正模型.方便对数据进行測试,改动了GDAL库中的RPC纠正模型,使之能够支持RPC像方改正參数. 以下是RPC模型的公式,rn,cn为归一化之后的图像行列号坐标,PLH为归一 ...

  8. 时间格式化函数strftime

     #include <time.h> #include <stdio.h> #include <string.h> int main() {   char ti ...

  9. js--- 堆栈 于拷贝

    1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小不定也不会自动释放. 2.基本类型和引用类型 基本类型:存放在栈内存中的简单数 ...

  10. Codefroces Educational Round 27 845G Shortest Path Problem?

    Shortest Path Problem? You are given an undirected graph with weighted edges. The length of some pat ...