移动web开发----特殊样式处理

最新推荐文章于 2024-04-20 22:24:31 发布

背太阳的牧羊人

最新推荐文章于 2024-04-20 22:24:31 发布

阅读量161

点赞数

分类专栏： CSS 文章标签：移动web开发

本文链接：https://blog.csdn.net/u013565133/article/details/82493785

版权

CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

本文探讨了在Retina屏幕下进行移动Web页面设计的技巧，包括高清图片的正确渲染方式、解决1px边框问题的方法，以及如何使用相对单位em和rem来增强页面的适配性和兼容性。同时，还介绍了单行和多行文本溢出的处理方案。

摘要由CSDN通过智能技术生成

以下是Retina屏幕下的问题。
高清图片：

在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即100100的图片应该使用100dp100dp。
width:(w_value/dpr)px;
height:(h_value/dpr)px;

ipx边框：

这里写图片描述

左边是没有1像素的，右边有1像素。
同样是Retina屏幕问题，根本原因是：1px使用2dp渲染。
不能用border:0.5px 来做，因为这种方法只有ios8可以使用，通用的方案是：scale(.5)

	.sidebar .folder li{
		padding:8px 0 8px 15px;
		columns: #7c7c7c;
		cursor: pointer;
		position: relative;
	}

	.folder li + li:before{
		position:absolute;
		top:-1px;
		left: 0;
		content: '';
		width:100%;
		height: 1px;
		border-top:1px solid #ddd;
		-webkit-transform: scale(0.5);
	}

相对单位：##

为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性。

**em：**是根据父节点的font-size为相对单位。
**rem：**是根据HTML的font-size为相对单位。

em在多层嵌套下就会变得难以计算控制，rem更能统一设置统一的度量。

多行文本溢出：

这里写图片描述

/* 单行文本溢出 */
.inaline{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* 多行文本溢出 */
.intwoline{
	display:-webkit-box!important;
	overflow: hidden;

	text-overflow: ellipsis;
	word-break: break-all;

	-webkit-box-orient: vertical;
	-webkit-line-clamp:2;//行数
}