Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说响应式页面设计,希望能够帮助你!!!。
随着移动互联网的使用越来越广泛,移动端浏览器的使用越来越多,因此开发网站必须考虑到在移动设备上访问的问题。那如何让PC端和移动端都可以很好的让网页内容显示呢?这就需要采取响应式页面设计了,响应式页面设计也是前端开发需要掌握的众多能力之一
1.响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。
2.自适应布局
自适应网页设计(Responsive Web Design)指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。目的是在不同分辨率的不同设备上面显示相同的页面,让同一张网页自动适应不同大小的屏幕,根据屏幕的宽度,自动调节网页的内容大小,但是无论怎么样子,他们的主体的内容和布局是没有变化的。
3.响应式与自适应的区别
更多
直接在css中使用:
@media 类型 and (条件1) and (条件2){
/*css样式*/
}
/*例子*/
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
使用link方式引入(宽度小于1024px):
<link rel="stylesheet" type="text/css" href="css.css" media="screen and (max-width:1024px)"/>
使用@import导入(宽度小于1024px):
@import url("css.css") screen and (max-width:1024px);
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>响应式</title>
<!-- <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> -->
<style> *{
margin:0; padding:0; text-align:center; color:yellow; } .header{
width:100%; height:100px; background:#ccc; line-height:100px; } .main{
background:green; width:100%; } .left,.center,.right{
float:left; } .left{
width:20%; background:#112993; height:300px; font-size:50px; line-height:300px; } .center{
width:60%; background:#ff0; height:300px; color:#fff; font-size:50px; line-height:400px; } .right{
width:20%; background:#f0f; height:300px; font-size:50px; line-height:300px; } .footer{
width:100%; height:50px; background:#000; line-height:50px; float: left; } @media screen and (max-width:1024px) and (min-width:720px) {
.right{
float:none; width:100%; background:#f0f; clear:both; } .left{
width:30%; } .center{
width:70%; } .main{
height:600px; } } @media screen and (max-width:720px){
.main{
height:600px; } .left,.center,.right{
float:clear; width:100%; } } </style>
</head>
<body>
<div class="header">头部</div>
<div class="main">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
</html>
随着屏幕缩小的页面效果:
6个容器属性:
6个项目属性:
具体效果详见:详解CSS的Flex布局
Bootstrap的核心功能特点:
如何学习:官方文档
上述主要讲解了什么是响应式布局,页面如何做到根据页面的宽度来调整布局,并介绍了一下Bootstrap框架。Bootstrap框架是一个方便、兼容性好的第三方库,使用Vue等其他框架开发也可以引用它提供的样式组件,提高开发的效率。
今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章