响应式设计

最新推荐文章于 2024-09-11 17:14:50 发布

番茄小火锅

最新推荐文章于 2024-09-11 17:14:50 发布

阅读量126

点赞数

分类专栏：前端入门文章标签：编辑器说明

本文链接：https://blog.csdn.net/qq_43062639/article/details/82052325

版权

前端入门专栏收录该内容

23 篇文章 0 订阅

订阅专栏

响应式布局小测试

设计一个类

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.canresponse {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

一旦掌握透彻float属性会给界面带来的改变，就十分容易理解设计这个类的意图。
float使得块脱离文档流，让块漂浮在当前界面的上层，直到它碰到包含它的框或者其他浮动元素的框。这样一来，就可以很容易的实现响应式设计啦。

使用bootstrap框架

相比于使用float来实现响应式设计，bootstrap框架可以提供更美观的界面体验。

在meta标签内定义对应的属性

 <meta name="viewport" content="width=device-width, initial-scale=1">

name 和 content 属性的作用是描述页面的内容
2. 在head内设置bootstrap框架的链接。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

控制块的可变宽度

<div class="container">
<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
</div>
</div>

经过上面这些设计，bootstrap框架就提供了一种可以在pc端和移动端都能快速响应式设计的方式。
学到了！