响应式网页设计之初步了解

响应式网页设计

一、什么是响应式网页?

答:为不同设备类型(如:电脑、手机、平板电脑)建立的不同的网页,检测到分辨率(应该可以说是屏幕吧)大小后调整到相应的网页。

二、响应式网页的作用?

答:为了解决不同设备的显示问题
如图所示,如果我们将网页进行等比缩放,那么将会存在很多界面显示不完整问题或者不美观,总之影响用户体验就是不行

响应式网页设计之初步了解_第1张图片
正是因为存在这样的问题,才有了响应式设计,通过建立一个网页自动改变网页内容大小、布局适应不同分辨率的屏幕。

三、开发响应式网页需要什么开发工具呢?

所谓工欲善其事,必先利其器
① 开发工具
我比较推荐的是Visual Studio Code 【https://code.visualstudio.com/】
vscode

至于如果使用我这里就不进行赘述啦(网上有很多安装及使用的教程)
② 浏览器
我常用的就是谷歌浏览器(Chrome)
响应式网页设计之初步了解_第2张图片

四、响应式开发常用断点

首先来解释什么是断点?简单来说就是一个分辨率区间就是一个效果,比如屏幕宽度是375px~640px一般就是手机屏幕,那么针对手机屏幕我们的内容大小样式也会发生变化【注:px是像素】,正如我们最开始说的响应式网页开发是为了解决不同设备的显示问题,那么如何解决的呢?就是根据不同的分辨率展示不同的页面效果
这里也不得不引入一个知识点:媒体查询@media

@media(min-width: Xpx){
     
	/* css样式代码 */
}
/* 宽度在 X~ ∞ 之间时(即大于X时),应用当前css样式 */
@media(max-width: Xpx){
     
	/* css样式代码 */
}
/* 宽度在 0 ~ X 之间时(即小于X时),应用当前css样式 */
@media(min-width: Xpx) and (max-width: Ypx){
     
	/* css样式代码 */
}
/* 宽度在 X ~ Y 之间时,应用当前css样式 */

响应式网页设计之初步了解_第3张图片

五、响应式网页小案例

通过以上内容来完成一个小案例
根据分辨率的改变来调整页面内容(盒子颜色、文字大小等)

下图是原样式
响应式网页设计之初步了解_第4张图片
下图是题目要求
响应式网页设计之初步了解_第5张图片
原样式结构(大体框架)

<body>
		<div class="card">div>
		<p class="text">Hello Worldp>
		<div class="card">div>
		<p class="text">Hello Worldp>
	body>

原样式css样式


完整代码如下(示例):


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style type="text/css">
			.card{
      
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			.text::after{
      
				content: "";
				display: block;
				clear: both;
			}
			
			.text{
      
				font-size: 60px;
				margin: 0px;
				line-height: 400px;
				text-align: center;	
			}
			@media (max-width:1440px) and (min-width:1280px) {
      
				.card{
      
					width: 700px;
					height: 350px;
					margin: 15px;
					background-color: green;
				}
					
				.text{
      
					font-size: 50px;
					line-height: 350px;
				}
			}
			@media (max-width:1280px) and (min-width:1024px) {
      
				.card{
      
					width: 600px;
					height: 300px;
					margin: 15px;
					background-color: blue;
				}
				.text{
      
					font-size: 40px;
					line-height: 300px;

				}
			}
			@media (max-width:1024px) and (min-width:768px) {
      
				.card{
      
					width: 500px;
					height: 250px;
					margin: 10px;
					background-color: yellow;
					font-size: 30px;
				}
				.text{
      
					font-size: 30px;
					line-height: 250px;

				}
			}
			@media (max-width:768px) and (min-width:640px) {
      
				.card{
      
					width: 400px;
					height: 200px;
					margin: 10px;
					background-color: red;
				}
				.text{
      
					font-size: 25px;
					line-height: 200px;

				}
			}
			@media (max-width:640px) and (min-width:375px) {
      
				.card{
      
					width: 100%;
					height: 200px;
					margin: 10px;
					background-color: pink;
				}
				.text{
      
					font-size: 40px;
					line-height: 80px;

				}
			}
			@media (max-width:375px) {
      
				.card{
      
					width: 100%;
					height: 150px;
					margin: 0px;
					background-color: orange;
				}
				.text{
      
					font-size: 20px;
					line-height: 40px;

				}
			}
		style>
	head>
	<body>
		<div class="card">div>
		<p class="text">Hello Worldp>
		<div class="card">div>
		<p class="text">Hello Worldp>
	body>
html>


总结

对响应式网页设计有初步的认识,学到了响应式网页是如何根据不同的分辨率进行变化,了解了常用断点,学会了清除浮动的新方法。

你可能感兴趣的:(响应式网页学习笔记,javascript,html,css3)