移动端css（流式布局，flex布局，rem，媒体查询，清除特殊样式）

最新推荐文章于 2024-02-05 03:15:00 发布

原创最新推荐文章于 2024-02-05 03:15:00 发布 · 515 阅读

CC 4.0 BY-SA版权

本文介绍了移动端布局的一些关键技巧，包括如何清除特殊样式，运用流式布局实现响应式设计，深入理解并应用flex布局以创建灵活的盒模型，以及使用rem单位进行尺寸调整。同时，还探讨了媒体查询在不同设备和屏幕尺寸下的应用，以确保跨平台的兼容性和用户体验。

清除特殊样式

 /*点击高亮我们需要清除，设置为transparent*/
 -webkit-tap-highlight-color: transparent;
  /*在移动端浏览器默认的外观上在ios上加上这个属性才能给按钮和输入框自定义样式*/
  -webkit-appearance: none;
  /*禁用长按页面时的弹出菜单*/
  -webkit-touch-callout: none;

布局

流式布局

定义：通过定义盒子宽度百分比来进行布局，也称非固定像素布局
注意：一般都要设置：max-width 和 max-height。

flex布局（弹性盒模型）

语法：父元素中写：
	display：flex
注意：如果父元素采用flex布局，子元素的float，clear，vertical-align属性将失效

父元素属性：
	flex-direction：设置主轴方向 // 主轴是指子元素排列方向，如 x方向（row） 或者 y方向（column）。
	justify-content：设置主轴上的子元素排列方式 如：居中对齐，两边对齐，先两边对齐在平分剩余空间
	align-items：设置侧轴上的子元素排列方式 （单行）：如：居中，对齐
	align-content：设置侧轴上的子元素排列方式（多行）（需要设置换行）：如：居中
	flex-wrap：设置子元素是否自动换行
	flex-flow：是一个flex-direction 和flew-wrap的和写
子元素属性：
	flex：定义子项分配剩余空间，flex来表示占多少份
	align-self：允许单个子元素与其他子元素有不一样的对齐方式，可覆盖align-items属性，默认auto，
				表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
	order：设置子元素的排列顺序

rem布局

什么是em？
em是元素本身字体大小，如过本身未设置字体大小，则继承父元素字体大小，如：
	div {
		font-size = 15px
	} 
	div p {
		font-size = 2em // 此时 font-size = 30px
	} 	
什么是rem?
rem是一种相对单位，相对于html元素的字体大小。如;
html {
	font-size = 15px
}
p {
	font-size = 2rem; //此时font-size = 30px
}

媒体查询

什么是媒体查询？
使用@media查询，可以针对不同的媒体类型定义不同的样式，针对不同的屏幕尺寸设置不同的样式
语法：
	@media 媒体类型 and/not/only （media feature）{
		css code；
	}