JavaScript手机自适应代码

<script>

        //width = device-width  ==> 网页宽度默认等于屏幕宽度
        //initial-scale = w     ==> 原始缩放比例
        //minimum-scale = 0.3   ==> 最小缩放比例
        //maximum-scale = 2     ==> 最大缩放比例
        //user-scalable = no    ==> 保证页面不可以缩放

       var width = window.screen.width;   //屏幕分辨率的宽度
       var w= width/525;         //525为页面实际宽度

       var content = 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的例子,展示如何使用HTML、CSS和JavaScript来创建一个响应式导航菜单。该菜单会在电脑和手机端自动适应。 首先,我们需要一个HTML结构,包含一个导航栏和一个菜单按钮。代码如下: ```html <nav> <div class="logo">Logo</div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> ``` 接下来,我们需要使用CSS来设置导航栏和菜单按钮的样式。代码如下: ```css nav { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: white; position: relative; z-index: 1; } .logo { font-size: 1.5rem; margin-left: 1rem; } .nav-links { display: flex; justify-content: space-around; width: 50%; } .nav-links li { list-style: none; } .nav-links a { color: white; text-decoration: none; font-size: 1.2rem; } .burger { display: none; cursor: pointer; } .burger div { width: 25px; height: 3px; background-color: white; margin: 5px; } ``` 现在,我们需要使用JavaScript来处理菜单按钮的点击事件,并根据屏幕宽度来切换菜单的显示和隐藏。代码如下: ```javascript const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); burger.classList.toggle('toggle'); }); window.addEventListener('resize', () => { if (window.innerWidth > 768) { nav.classList.remove('nav-active'); burger.classList.remove('toggle'); } }); ``` 最后,我们需要使用CSS来设置响应式菜单的样式。代码如下: ```css @media screen and (max-width: 768px) { .nav-links { position: absolute; right: 0px; height: 92vh; top: 8vh; background-color: #333; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; } .nav-links li { opacity: 0; } .burger { display: block; position: absolute; top: 3vh; right: 5vw; } .nav-active { transform: translateX(0%); } .nav-links li { opacity: 1; transition: opacity 0.5s ease-in; } } ``` 这些代码将创建一个响应式导航菜单,可以在电脑和手机端自动适应

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值