自适应一些问题解决方案

最新推荐文章于 2024-07-10 14:25:23 发布

道学先生

最新推荐文章于 2024-07-10 14:25:23 发布

阅读量177

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_56463190/article/details/126260039

版权

项目场景：

不同项目有不同的场景，文章仅供参考
建议：做自适应的时候，尽量使用百分比！！！

@media媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

//用法   例如当屏幕宽度小于等于767px的时候，class="top"的宽度变为100%
@media (max-width: 767px){
   .top{
    width: 100%;
  }
}

@media (min-width: 767px)大于等于768的设备
@media (min-width: 992px)大于等于768的设备
@media (min-width: 1200px)大于等于768的设备

注意下顺序，如果把@media (min-width: 768px)写在了下面会失效，因为后面的优先级会更高

取消屏幕左右滑动条

有时候实际写的页面已经超出body，就会出现左右的滚动条，这是在移动端所不希望的

body {
  overflow-x: hidden;
}

写一个返回顶部的功能

一个返回顶部的按钮，并且滑到一定的高度才显示。

方法不唯一，这是一种

<div class="goTop">
    <img src="img/top.png">//这里选择一张图片作为图标
</div>
<script>
    let goTop = document.getElementsByClassName("goTop")[0];
    //滑动用到window的onscroll（）的方法
    window.onscroll = function () {
        //让 body html进行滚动（有的浏览器获取不到body或html）
        //scrollTop据顶部的滑动的距离
        let res = document.body.scrollTop || document.documentElement.scrollTop;
        if (res >= 2000) {//当大于2000px，按钮出现
            goTop.style.display = 'block';
        } else {
            goTop.style.display = 'none';
        }
    }
    //点击返回功能
    goTop.onclick = function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

css样式

.goTop img{
  height: 30px;
  width: 30px;
  position: fixed;
  right: 20px;
  bottom: 30px;
}

值得注意的问题：

body {
  height: auto;//body的高度是auto，如果是height：100%则不生效
}

另一种比较简单

<body>
//在body下写一个div,设置其id
<div id="top"></div>

//再写一个a标签设置其href属性为id，点击即可回到顶部
<a href="#top" class="goTop">
</a>

css样式

.goTop::after {
  content: "";
  height: 20px;
  width: 20px;
  top: 12px;
  border-width: 7px 7px 0 0;
  border-color: #0ab7fa;
  border-style: solid;
  transform: rotateZ(312deg);
  position: absolute;
}