移动端和pc端,响应式设计布局

Posted wgl0126

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端和pc端,响应式设计布局相关的知识,希望对你有一定的参考价值。

1.什么是响应式 Web 设计?

  • 响应式 Web 设计让你的网页能在所有设备上有好显示。
  • 响应式 Web 设计只使用 html 和 CSS。
  • 响应式 Web 设计不是一个程序或javascript脚本。

2.响应式的作用:设计最好的用户体验 

友好的用户体验是网页可以在任何设备上展示和操作,设备包括桌面系统设备,平板电脑,iPhone等手机等。

网页应该根据设备的大小自动调整内容。

页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整称之为响应式 Web 设计。

3.自适应设计或者响应式设计的方法

(1)使用@media,条件(min-width: 768px)判断当浏览器的宽度小于768px值时,改变样式。

@media (min-width: 768px) {
  .main {
    width: 25%;
    float: left;        
  }
}

通过媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"
		media="screen and (max-device-width: 400px)"
		href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

link rel="stylesheet" type="text/css"
		media="screen and (min-width: 400px) and (max-device-width: 600px)"
		href="smallScreen.css" />

上面的代码意思是:如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

(2)宽度使用百分比,尽量少使用绝对值宽度。

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

例如:

不能使用一下css代码:

div{width:xxx px}

在响应式中,应该这么使用:

div{
    width:100%;
    //或者
    width:auto;
}

(3)字体的设置相对大小

移动端字体也不能使用绝对大小(px),而只能使用相对大小(em)或者高清方案(rem),rem不局限于字体大小,前面的宽度width也可以使用,代替百分比

body{
    font: normal 100% Helvetica, Arial, sans-serif;//设置字体大小为默认大小,16像素
}

移动端设置字体大小:

在移动端上,设置字体为24px,则24/16=1.5,p的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

p{font-size: 1.5em}

(4)流动布局(fluid grid)

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

.leftDiv{
    float: left;
    width: 70%;
}
.rightDiv {
    float: right;
    width: 25%;
} 

 4.具体理解

在网页上,写一个普通的网页效果

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<meta charset="utf-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
	p{border: 1px solid black;}
</style>
<body>
<div>
	<p>响应式原理</p>
</div>
</body>
</html>

技术分享图片

模拟手机上看到的样式,字体很小,看不清,是因为按照电脑上的像素对字体进行设置的,分辨率不一样。

技术分享图片

加上代码后的样式:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • viewport: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容
  • width: 浏览器宽度,输出设备中的页面可见区域宽度
  • device-width: 设备分辨率宽度,输出设备的屏幕可见宽度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例

 技术分享图片

 

以上是关于移动端和pc端,响应式设计布局的主要内容,如果未能解决你的问题,请参考以下文章

响应式布局的两种实现形式

响应式设计的时候移动端的hover怎么处理?

响应式布局

响应式设计

egret eui 响应式布局

HTML响应式布局项目实战18