移动端网页开发

最新推荐文章于 2024-04-04 16:32:05 发布

V-Sugar

最新推荐文章于 2024-04-04 16:32:05 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： html css html5 css3 js

本文链接：https://blog.csdn.net/weixin_43844838/article/details/107297470

版权

移动端网页开发

一、视口

解释：
视口是移动设备上用来显示网页的区域,-般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签, name="viewport”来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。
一般为了适配要加上以下内容

<!-- meta:vp 快捷键 -->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二、retina屏幕适配

视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用 css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
一般都是将图像放大到原来的两倍，然后再用样式将其改成原来的样子

三、背景图尺寸设置

强制改变背景图的大小可以用:background属性更改

background属性：

length:用长度值指定背景图的大小，不能为负
percentage：用百分比指定背景图的大小，不能为负
auto：背景图的真实大小
cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景图尺寸设置</title>
	<style type="text/css">
		.box{
      
			width:200px;
			height:300px;
			margin:50px auto 0;
			border:2px solid #000;
			background:url(images/a.jpg) no-repeat;

			/*background-size:200px 200px;*/

			/*background-size:100% 100%;*/
			/*background-size:cover;*/
			background-size:contain;
		}
	</style>
</head>
<body>
	<div class="box">123</div>
	
</body>
</html>

素材：

四、流体式布局

解释：即：宽度可以适应窗口改变屏幕不不停的改变
创建方法
1. 用百分比来设置元素的宽度，
2. 元素的高度按实际高度写固定值，
3. 如果元素的边框无法用到百分比的话:
  3.1 可以使用样式中的计算函数(calc())来设置宽度
  3.2 可以使用box-sizing属性将盒子设置为从边线计算盒子的尺寸

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

最低0.47元/天解锁文章

V-Sugar

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
移动端网页开发

移动端网页开发一、视口二、retina屏幕适配三、背景图尺寸设置四、流体式布局五、响应式布局六、单位em七、单位rem一、视口解释：视口是移动设备上用来显示网页的区域,-般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签, name="viewport”来设置视口的大小,将视口的大小设置为和移动设备可视区一样
复制链接

扫一扫