HTML和CSS之移动端

最新推荐文章于 2023-01-05 10:45:51 发布

半皖丨清愁

最新推荐文章于 2023-01-05 10:45:51 发布

阅读量337

点赞数

分类专栏：前端笔记文章标签： flex

本文链接：https://blog.csdn.net/weixin_47481936/article/details/115350686

版权

meta视口标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		
		<title></title>
	</head>
	<body>
		1
	</body>
</html>

物理像素比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
		minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
    
				margin: 0;
				padding: 0;
			}
			
			div{
    
				width: 300px;
				height: 300px;
				background-color: #BBFFAA;
			}
			/* 物理像素就是分辨率 iphone8的物理像素是750 */
			再iphone8里面 1px 开发像素 = 2个物理像素
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

二倍图做法

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			/* 50px*50px像素图片直接放手机里会放大2倍 就会模糊 */
			/* 我们采取的是放一个100*100的图片,然后手动的缩小为50*50的 */
			/* 我们准备的图片比我们实际需要的大小 大2倍,这就是2倍图 */
			img[src*="apple100"]{
    
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 模糊的 -->
		<img src="img/apple50(1).jpg" >
		<!-- 我们采取2倍图 -->
		<img src="img/apple100.jpg" >
	</body>
</html>

背景缩放比

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			div{
    
				width: 500px;
				height: 500px;
				border: 2px solid red;
				background: url(img/dog.jpg) no-repeat;
				/* background-size: 图片的宽度 图片的高度; */
				/* background-size: 500px 200px; */
				/* 1.只写一个参数 是宽度, 会等比例拉伸 */
				/* background-size: 500px; */
				/* 2.里面的单位可以给% 相对于父盒子来说 */
				/* background-size: 50%; */
				/* 3.cover 要完全覆盖div盒子 可能有部分背景图片显示不全*/
				/* background-size: cover; */
				/* 4.contain 高度和宽度等比例拉伸 当宽度或者高度铺满div盒子就不再拉伸*/
				background-size: contain;
				
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

背景图片2倍图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			/* 1.50*50图片,要准备2倍 100*100 */
			/* 2.缩放一般,50*50 bg-size */
			div{
    
				width: 50px;
				height: 50px;
				border: 1px solid red;
				background: url(img/apple100.jpg) no-repeat;
				background-size: 50px 50px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<style type="text/css">
			
			div{
    
				/* css3盒子模型 */
				-webkit-box-sizing: border-box;
			}
			a{
    
				/* 点击高亮我们需要清除.设置为transparent透明 */
				-webkit-tap-highlight-color: transparent;			
			}
			
			input{
    
				/* 加上这属性才能给按钮和输入框设定样式 */
				-webkit-appearance: none;
			}
			/* 禁用长按页面时弹出菜单 */
			img,a{
    
				-webkit-touch-callout: none;
			}
		</style>
		
	</head>
	<body>
		<a href="">奥特曼</a>
		<input type="button" value="按钮"/>
	</body>
</html>

流式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
		maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
    
				margin: 0;
				padding: 0;
			}
			section{
    
				width: 100%;
				max-width: 980px;
				min-width: 320px;
				margin: 0 auto;
			}
			section div{
    
				float: left;
				width: 50%;
				height: 400px;
				
			}
			section div:nth-child(1){
    
				background-color: skyblue;
			}
			section div:nth-child(2){
    
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
		</section>
	</body>
</html>

flex设置主轴方向

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,
		initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			div{
    
				/* 给父级添加flex属性 */
				display: flex;
				width: 80%;
				height: 300px;
				background-color: #bfa;
				/* 默认的主轴是我们的x轴 row 那么y轴就是侧轴*/
				/* 元素跟朕主轴排列 */
				/* flex-direction: row; */
				/* 简单了解翻转 */
				/* flex-direction: row-reverse; */
				/* 可以把主轴设置成y轴 */
				/* flex-direction: column; */
				flex-direction: column-reverse;
			}
			div span{
    
				width: 150px;
				height: 100px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2

最低0.47元/天解锁文章

半皖丨清愁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS之移动端

meta视口标签<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> <title></title> &lt
复制链接

扫一扫

专栏目录