前端

前端基础相关介绍

网页移动端左右晃动






解决页面移动端左右晃动


html {  

  overflow-x: hidden;  

  overflow-y: auto;  

}  

//overflow: 属性规定当内容溢出元素框时发生的事情

    值:hidden:内容会被修剪,并且其余内容是不可见的

            auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

body {  

  width: 100vw;  

  overflow: hidden;  

  padding-left: calc(100vw - 100%);  

//width: 100vw;   vw:指宽度相当于可视窗口的百分比100vw 就是可视窗口的100%

//  padding-left:元素的做内边距

//  calc(100vw - 100%) 就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0) 左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器,从而没有任何跳动!


如PC端出现页面内容部分向左右偏移采用如下方法:

 @media (min-width:800px) {       //媒体查询控制可视屏幕大于800px时候站点样式

            .test{        // 给与偏移部分一个名为"test"的类

                position:relative;        //定义元素为相对定位

                left:-25px;         向左偏移25px(向右偏移-25px)

            }

        }







相关信息
captcha