网页设计-移动端

原创已于 2022-03-22 10:25:31 修改 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3 #前端 #ios

于 2022-03-21 22:26:17 首次发布

本文探讨了网页设计中的关键元素，包括使用 CSS 实现四栏布局，通过媒体查询进行响应式设计，以及元数据标签的作用。理解这些技术对于创建适应不同屏幕尺寸的现代网站至关重要。

1、分栏

column-count: 4; 栏数列数

column-width: 200px; 每栏的宽度，单位像素px

column-rule: 5px solid red; 指定列之间的规则：宽度、样式、颜色

column-gap: 5px; 栏间距设置栏间距

2、媒体查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  .box{
			  width: 100px;
			  height: 100px;
			  transition: 0.8s;
			  background-color: red;
		  }
		  @media screen and (max-width:700px){
		  			.box{
		  				  width:150px;
		  				  height: 150px;
		  				  background-color:green;
		  			  }
		  
		  @media screen and (max-width:500px){
			  .box{
				  width:50px;
				  height: 50px;
				  
				  background-color: aqua;
			  }
			  @media screen and (max-width:300px){
			  			  .box{
			  				  width:90px;
			  				  height: 90px;
			  				  background-color: black;
			  			  }
		  }
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

3、meta元数据标签

基本格式：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放，值为"yes"或"no"