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

最新推荐文章于 2024-03-06 15:10:31 发布

chen_jia_hao

最新推荐文章于 2024-03-06 15:10:31 发布

阅读量6.9k

点赞数

分类专栏：前端文章标签：屏幕适配 rem 菜单切换

本文链接：https://blog.csdn.net/chen_jia_hao/article/details/79825805

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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>

效果：

chen_jia_hao

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
移动端屏幕适配和css美化浏览器自带的滚动条

一、css美化浏览器自带的滚动条：浏览器自带的滚动条显示不太美观，我们可以调css样式来美化一下。了解以下浏览器（webkit内核）滚动条自带伪类样式：::-webkit-scrollbar：针对缺省样式 (必须的)。::-webkit-scrollbar-track：滚动条的滑轨伪类。::-webkit-scrollbar-thumb：滚动条滑块伪类。::-webkit-sc...
复制链接

扫一扫