-
<meta name = "viewport" content = "width = device - width,initial-scale =1.0">縮放=1.0
查看全部 -
ie8y引入respond.js
查看全部 -
css,js,fonts
查看全部 -
<link type = "text/css" rel = "stylesheet" href = "link.css" media="only screen and (max-width:480px)"/>
@media screen and (min-with:480px){
? ? ?body{background:blue;}
}
查看全部 -
media query
查看全部 -
外部樣式引用格式?
<link? type="text/css"? rel="stylesheet"? href="link.css"? media="only? screen? and? (max-width:500px)"/>
內部引用格式
@media screen and (max-width:500px) {body{background:red}}
查看全部 -
實現響應式布局的三種方法
查看全部 -
響應式布局設計是為了解決不同設備的顯示兼容問題，遵循移動端優先，漸進的原則。有三種響應式布局設計的方法：css，js，第三方框架bootstrap實現。查看全部
-
css3-Media Query
常見的屬性：
device-width,device-height---屏幕寬高
width,height---渲染窗口寬高
orientation---設備方向
resolution----設備分辨率
查看全部 -
Response.js必須放在web service 中查看全部
-
外鏈式： media="only?screen?and?(max-width:480px)"http://寬度<480px
內嵌式：
@media?screen?and?(mix-width:480px){??}//寬度>480px查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 頁面按原比例顯示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--引入樣式-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--兼容瀏覽器-->
<!--[if lt IE 9]>
? ? ? ? <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
? ? <![endif]-->
</head>
<body>
<!--導航欄-->
<nav class="navbar navbar-inverse" role="navigation">
<!--給導航添加居中效果-->
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
? ? ? ? ? ? <span class="sr-only">切換導航</span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? </button>
<a class="navbar-brand" href="#">響應式導航</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!--添加居中-->
<div class="container">
<!--添加柵格布局的外圍容器 row-->
<div class="row">
<!--左側布局-->
<div class="col-sm-9">
<!--頁面極小的時候顯示按鈕-->
<p class="pull-right visible-xs">
<button class="btn-xs btn btn-primary">Toggle</button>
</p>
<div class="jumbotron">
<h1>歡迎登陸頁面！</h1>
<p>這是一個超大屏幕（Jumbotron）的實例。</p>
</div>
<!--左側下方布局也設置為柵格布局-->
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
<div class="col-6 col-sm-6 col-lg-4">
<h2>headLine</h2>
<p>Bootstrap 包含了一個響應式的、移動設備優先的、 不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。 它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
</p>
<a class="btn btn-default">View Detail</a>
</div>
</div>
</div>
<!--右側布局-->
<div class="col-sm-3">
<ul class="list-group">
<li class="list-group-item">AAAAAAAAAAA</li>
<li class="list-group-item">BBBBBBBB</li>
<li class="list-group-item">CCCCCCCCCCCC</li>
<li class="list-group-item">DDDDDDDDDDD</li>
<li class="list-group-item">FFFFFFFFF</li>
</ul>
</div>
</div>
</div>
</body>
</html>
查看全部 -
<div class="container"/> </div>某個元素居中
查看全部 -
css3-Media Query
device-width,device-height????????屏幕寬高
width,height????????渲染窗口寬高
orientation????????設備方面
resolution????????設備分辨率
查看全部 -
剛覺bootstrp講的有點應付查看全部
舉報