移动端屏幕适配和css美化浏览器自带的滚动条

一、css美化浏览器自带的滚动条：

浏览器自带的滚动条显示不太美观，我们可以调css样式来美化一下。了解以下浏览器（webkit内核）滚动条自带伪类样式：

::-webkit-scrollbar：针对缺省样式 (必须的)。

::-webkit-scrollbar-track：滚动条的滑轨伪类。

::-webkit-scrollbar-thumb：滚动条滑块伪类。

::-webkit-scrollbar-track-piece：内层轨道伪类。

::-webkit-scrollbar-button：滑轨两头的监听按钮伪类。

::-webkit-scrollbar-corner：横向滚动条和纵向滚动条相交处尖角的颜色。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body{overflow:scroll;}/* 针对缺省样式 (必须的) */::-webkit-scrollbar {width: 10px;height:0px;}/* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-track {background-color: gray;border-radius:5px;}/* 滑块颜色 */::-webkit-scrollbar-thumb {background-color: red;border-radius:20px;}/*内层轨道的颜色*/::-webkit-scrollbar-track-piece{background-color:gray;border-radius:5px;}/* 滑轨两头的监听按钮颜色 */::-webkit-scrollbar-button {background-color:gray;width:0;height:0;}/* 横向滚动条和纵向滚动条相交处尖角的颜色 */::-webkit-scrollbar-corner {background-color: black;}div{width:300px;height:200px;overflow:scroll;}</style></head><body><div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div></body></html>

效果图：

自己可以根据需要，自动调css即可实现自己想要的效果。

二、h5移动端屏幕适配问题：

移动web Viewpoint常用得设置方式：

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

该设置能够使pc的页面在不同得像素宽度手机上正常显示。
width:设置viewpoint的特定值一般都是 device-width。
initial-scale:设置页面的初始缩放。
minimum-scale:最小缩放。
maximum-scale:最大缩放。

user-scalable:用户能否缩放。

width=device-width 规定页面宽度与设备宽度一致。
initial-scale=1.0 设置初始缩放比为1.0 。
maximun-scale=1.0 设置最大缩放比为1.0。
user-scalable=no 用户不可以对页面进行缩放。

CSS3 中的 rem 值与 px 之间的换算：

rem是一个相对单位。

1、如果没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了值为 20px，那 1rem 就为 20px。

2、如果要使用 rem 单位，html 的字体默认大小必须设置为 12px 或以上才行。

参照表：

更灵活的适配方案：基准值

动态改变html元素中style的font-size值。这样当我们的单位是rem时，它是可以自动适配各种屏幕（自动缩放）。

例如：基于iphone6（375 x 667）来设计，基准值为100。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75+ 'px'；

这样我们在div里面设置宽度的时候，3.75rem = 375px；同时在不同分辨率的手机上可以自动适配。计算也方便，除以100即可。

三、window和document获取视窗大小

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

document.body.clientWidth的值可视窗口内部宽度（不包括滚动条）。

document.body.clientHeight表示body元素的宽度。
document.documentElement.clientWidth/Height的值为可视窗口内部大小，不包括工具栏和水平或垂直滚动条。
window.innerWidth/Height的值也是可视窗口内部大小加上滚动条宽度。
window.outerWidth/Height的值是可视窗口整体大小，包括工具栏和滚动条。

四、菜单切换效果实现（jquery）

1、demo代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.container{position: relative;}.left{width:200px;background: gray;/*float: left;*/position: absolute;}.right{width:calc(100% - 200px);background: green;position: absolute;margin-left: 200px;}</style></head><body><div><a href="javascript:;" id='btn_toggle'>切换</a></div><div class="container"><div class="left">菜单菜单菜单菜单菜单菜单菜单<br/>菜单菜单菜单菜单菜单菜单菜单<br/></div><div class="right">12内容内容内容内容12内容内容内容内容内容内容12内容内容内容内容内容内容12内容内容内容内容内容内容12内容内容内容内容内容内容内容内容内容内容内容内容内容内容<br/>12内容内容内容内容内容内容内容内容内容内容内容内容<br/></div></div><script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script><script>var flag =  true;$("#btn_toggle").off().click(function(){var leftWidth = $(".left").width();console.log("左邊："+leftWidth);if(flag){$(".left").animate({left: "-"+leftWidth+"px"});$(".right").animate({marginLeft: '0px',width:'100%'});flag=false;}else{var width = $(window).width();console.log("window:"+width);var rightWidth = width - leftWidth;console.log("right:"+rightWidth);$(".left").animate({left:'0px'});$(".right").animate({marginLeft: leftWidth+"px",width:rightWidth+"px"});flag=true;}});window.onresize = function(){var width = $(window).width();var rightWidth = $(".right").width();if(width!=rightWidth){var leftWidth = $(".left").width();$(".right").css('width',(width-leftWidth)+"px");}}</script></body>
</html>

效果：

移动端屏幕适配和css美化浏览器自带的滚动条相关推荐

超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
移动端屏幕适配+事件+常见问题解决
移动端屏幕适配 <meta name="viewport" content="width=device-width, initial-scale=1, maximu ...
移动端屏幕适配原理以及方法讲解
序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了 ...
@media 移动端屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果.(当然了,他是一个相对单位,以 ...
从FrozenUI中学习移动端屏幕适配问题
屏幕适配 Oaker edited this page on 18 Mar 2016.29 revisions 原文链接:https://github.com/frozenui/frozenui/wi ...
css美化浏览器滚动条
单独使用css的方法虽然简单,但只有chrome兼容好,ie只能改滚动条颜色,火狐不支持css修改 1.先看chrome滚动条每部分的名字(直接引用的https://www.cnblogs.com/w ...
android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法
文/腾讯莫振中移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力.在使用了腾讯优测进行软件测试后,问题得 ...
解决 “数据大屏“ 展示的屏幕适配问题
现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配. 一.引入flexible文件 flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改 ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
一,使用creator3.3.2 分别实现手机端和浏览器的适配效果如下打包web-mobile(居然会有这种需求 /流汗!) pc浏览器显示手机端显示 1.首先在项目中设置分辨率和默认适配这里 ...

移动端屏幕适配和css美化浏览器自带的滚动条

移动端屏幕适配和css美化浏览器自带的滚动条相关推荐

最新文章

热门文章