响应式布局与Bootstrap框架学习笔记

最新推荐文章于 2024-08-15 10:47:57 发布

YyykStudy

最新推荐文章于 2024-08-15 10:47:57 发布

阅读量592

点赞数 1

分类专栏： less rem bootstrap 文章标签： bootstrap html5 css3 前端

YyykStudy

本文链接：https://blog.csdn.net/weixin_45145914/article/details/112638666

版权

less 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

rem

1 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

1.rem布局

rem的大小基本单位是html的字体大小

	<style>
		html{
			font-size: 20px;
		}
		p{
			width: 10rem; 
			height: 10rem;
			background-color: pink;
		}
	</style>
	<body>
		<p></p>
	</body>

rem的大小基本单位是html的字体大小

2.媒体查询

语法规范

	@media mediatype and|not|only (media feature){
		CSS-Code;
	}

用@media开头注意@符号
mediatype媒体类型
关键字 and not only media feature
媒体特性必须有小括号包含

mediatype :all/print/scree

例：

	/*按从小到大的顺序来写*/
	@media screen and (min-width: 320px) {
		html{
			font-size: 50px;
		}
	}
	@media screen and (min-width: 640px) {
		html{
			font-size: 100px;
		}
	}
	
	.top {
		width: 100%;
		height: .6rem;
		background-color: #6495ED;
		text-align: center;
		line-height: .6rem;
	}
	p {
		font-size: .3rem;
		color: azure;
	}

	<div class="top">
		<p>购物车</p>
	</div>

642x150

619x150

引入资源
根据媒体尺寸调用不同的css

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="">

例：

<link rel="stylesheet" href="css/index-320.css" media="screen and (min-width: 320px)" />
<link rel="stylesheet" href="css/index-640.css" media="screen and (min-width: 640px)" />

小于640

大于640

3.less

CSS预处理器，扩展CSS的动态特性
使用less首先要先安装nodejs，然后在cmd中通过npm命令下载less

npm install -g less

例：

@color:pink;
@fonsize:14px;
div{
	background-color: @color;
	font-size: @fonsize;
}

注意：

变量名不能以数字开头，不能有特殊字符
变量名不区分大小写

安装less编译插件即可把less文件编译成css文件

编译后

div {
  background-color: pink;
  font-size: 14px;
}

less嵌套

@color:pink;
@fonsize:14px;
div{
	background-color: @color;
	font-size: @fonsize;
	div{
		background-color: darkcyan;
	}
}

编译后

div {
  background-color: pink;
  font-size: 14px;
}
div div {
  background-color: darkcyan;
}

对与伪类、交集选择器、伪选择器，嵌套‘:’前要加‘&’符号

a{
	&:hover{
	}
}

编译后

a:hover{

}

less运算

div{
	width: 100 / 45rem;
}

div {
  width: 2.22222222 rem;
}

注意：

运算符：+ - * /
运算符前后要空一格
两个数运算只有一个数有单位，则以改单位为准。若都有单位且单位不同，则以第一个单位为准。

苏宁网首页案例制作

方案1：less+rem

1.技术选型

方案∶我们采取单独制作移动页面方案
技术:布局采取rem适配布局( less + rem +媒体查询)
设计图:本设计图采角750px设计尺寸

2.搭建架构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>

</body>
</html>

3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

normalize.css下载

4.设置公共common.less文件

新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺寸有32px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px.
划分的份数我们定为15等份
因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面

// 设置常见的屏幕尺寸 修改html文字大小

// 默认：大于750px
html{
	font-size: 50px;
}

// 将屏幕划分为15分
@num: 15;

// 320px424px480px540px720px
@media screen and (min-width: 320px){
	html{
		font-size: 320px / @num;
	}
}
// 360px
@media screen and (min-width: 360px){
	html{
		font-size: 360px / @num;
	}
}
// 375px
@media screen and (min-width: 375px){
	html{
		font-size: 375px / @num;
	}
}
// 384px
@media screen and (min-width: 384px){
	html{
		font-size: 384px / @num;
	}
}
// 400px
@media screen and (min-width: 400px){
	html{
		font-size: 400px / @num;
	}
}
// 414px
@media screen and (min-width: 414px){
	html{
		font-size: 414px / @num;
	}
}
// 424px
@media screen and (min-width: 424px){
	html{
		font-size: 424px / @num;
	}
}
// 480px
@media screen and (min-width: 480px){
	html{
		font-size: 480px / @num;
	}
}// 540px
@media screen and (min-width: 540px){
	html{
		font-size: 540px / @num;
	}
}// 720px
@media screen and (min-width: 720px){
	html{
		font-size: 720px / @num;
	}
}
// 750px
@media screen and (min-width: 750px){
	html{
		font-size: 750px / @num;
	}
}

5.新建index.less文件

新建index.less这里面写首页的样式
将刚才设置好的common.less 引入到index.less里面语法如下∶

/*在 index.less中导入common.less文件*/
@import "common"
/*
@import导入的意思可以把一个样式文件导入到另外一个样式文件里面
link是把一个样式文件引入到 htm1页面里面
*/


body {
	min-width: 320px;
	width: 15rem;
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial,Helvetica;
	background:#F2F2F2;
}

@baseFont: 50;
.search-content{
	display: flex;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 15rem;
	height: 88rem / @baseFont;
	background-color: #FFC001;
	
	.classify{
		width: 44rem / @baseFont;
		height: 70rem / @baseFont;
		margin: 11rem / @baseFont 24rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
		background: url(../img/classify.jpg) no-repeat;
		background-size: 44rem / @baseFont 70rem / @baseFont;
	}
	.serch {
		flex: 1;
		input{
			width: 100%;
			height: 66rem / @baseFont;
			border: none;
			border-radius: 33rem / @baseFont;
			background-color: #FFF2CC;
			margin-top: 10rem / @baseFont;
			font-size: 25rem / @baseFont;
			padding-left: 55rem / @baseFont;
			color: #757575;
		}
	}
	
	.login{
		width: 75rem / @baseFont;
		height: 70rem / @baseFont;
		margin: 10rem / @baseFont ;
		color: #FFF;
		font-size: 25rem / @baseFont;
		line-height: 70rem / @baseFont;
		text-align: center;
		
	}
}

效果图：

方案2：flexible.js+rem

flexible.js
手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把html文字笑小设置为75px(750px/10)就可以里面页面元素rem值:页面元素的px值 / 75
剩余的，让flexible.js来去算

下载flexible完整版

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/flexible.js"></script>

写index.less，然后编译

@media screen and (min-width: 750px) {
	html{
		font-size: 75px!important;
	}
}
	
body {
	max-width: 750px;
	min-width: 350px;
	width: 10rem;
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial,Helvetica;
	background:#F2F2F2;
}

.search-content{
	display: flex;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 10rem;
	height: 1.173333rem;
	background-color: #FFC001;
}
	
.classify{
	width: 0.586666rem;
	height: 0.933333rem;
	margin: 0.146666rem 0.32rem 0.093333rem 0.32rem;
	background: url(../img/classify.jpg) no-repeat;
	background-size: 0.586666rem 0.933333rem;
}
.serch {
	flex: 1;
	input{
		width: 100%;
		height: 0.88rem;
		border: none;
		border-radius: 0.44rem;
		background-color: #FFF2CC;
		margin-top: 0.133333rem;
		font-size: 0.333333rem;
		padding-left: 0.733333rem;
		color: #757575;
	}
}

.login{
	width: 1rem;
	height: 0.933333rem;
	margin: 0.133333rem;
	color: #FFF;
	font-size: 0.333333rem;
	line-height: 0.933333rem;
	text-align: center;
}

运行
大于750

小于750 自适应

4.响应式布局

1. 设备划分

设备划分

2. 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时划分的尺寸

超小屏幕(手机，小于768px )∶设置宽度为100%
小屏幕(平板，大于等于768px )︰设置宽度为750px
中等屏幕（桌面显示器，大于等于992px):宽度设置为970px
大屏幕(大桌面显示器，大于等于1200px ) :宽度设置为1170px

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>响应式布局</title>
	<style>
		
		.container {
			height: 150px;
			background-color: pink;
			margin: 0 auto;

		}
		@media screen and (max-width: 767px){
			.container{
				width: 100%;
			}
		}
		@media screen and (min-width: 768px){
			.container{
				width: 750px;
			}
		}
		@media screen and (min-width: 992px){
			.container{
				width: 970px;
			}
		}
		@media screen and (min-width: 1200px){
			.container{
				width: 1170px;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		
	</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>响应式布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 750px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        .container ul li{
            width: 83.33px;
            height: 30px;
            background-color: plum;
            float: left;
        }
        @media screen and (max-width: 767px){
            .container{
                width: 100%;
            } 
            .container ul li{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
</html>

5.BootStrap

BootSrap中文文档

1. 下载BootStrap

下载BootStrap

2. 在项目下新建bootstrap文件夹，并解压到此文件夹中

新建bootstrap文件夹并解压其中
总体结构
在这里插入图片描述

3. html基本骨架

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--  -->
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置:视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>Bootstrap Template</title>
    
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 1.解决ie9以下浏览器对html5新增标签不识别，并导致CSS不起作用的问题 -->
    <!-- 2.解决ie9以下浏览器对css3 Media Query 的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

4. 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container它提供了两个作此用处的类。
布局容器
container类（响应式）

响应式布局的容器固定宽度
大屏（>=1200px）宽度定为1170px
中屏（>=992px）宽度定为970px
小屏（>=768px）宽度定为750px
超小屏（100%）

container-fluid类（固定）

流式布局容器百分百宽度
占据全部视口( viewport )的容器。
适合于单独做移动端开发

5. 栅格系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置:视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>Bootstrap Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
    	/* 没 */
        [class^="col"] {
            border: solid 1px silver;
        }
        .container .row:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 行相加等于12份 -->
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 行相加小于12份 -->
        <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 行相加大于12份 -->
        <div class="row">
            <div class="col-lg-5">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

超小号

栅格参数
col-lg-* ：大号意思是min-width：1200px
col-md-* ：常规意思是min-width：992px
col-sm-* ：小号意思是min-width：768px
col-xs-* ：超小号意思是min-width：0px

列嵌套

每个格都有5px的padding值
若不想有padding值且高度和父类一样高，放在class=row的div中即可

	<style>
	    .row>div {
	        height: 50px;
	        background-color: pink;
	    }
	</style>
	
	<div class="container">
	    <div class="row">
	        <div class="col-md-4">
	            <div class="row">
	                <div class="col-md-6">11</div>
	                <div class="col-md-6">12</div>
	            </div>
	        </div>
	        <div class="col-md-4">2</div>
	        <div class="col-md-4">3</div>
	    </div>
	</div>

列嵌套

列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距( margin ) 。

	<style>
        .row>div {
            background-color: pink;
            height: 50px;
        }
    </style>
    
	<!-- 列偏移 -->
    <div class="container">
        <div class="row">
            <div class="col-md-4">👈</div>
            <div class="col-md-4 col-md-offset-4">👉</div>
        </div>
    </div>

    <!-- 居中 -->
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">👇</div>
        </div>
    </div>

列排序

	<style>
        .row>div {
            background-color: pink;
            height: 50px;
        }
    </style>

	<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">👈</div>   
            <div class="col-md-8 col-md-pull-4">👉</div>
        </div>
    </div>

列排序

响应式开发

	<div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 visible-xs">31</div>
            <div class="col-xs-3 hidden-xs">32</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

小于768px
大于768px

6.阿里百秀首页案列

技术选型

方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图：本设计图采用1280px设计尺寸

1. 页面布局分析

2.屏幕划分分析

屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的
屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局
屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局
策略︰我们先布局md以上的 pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式

3.代码

整体结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置:视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>阿里百秀</title>

    <!-- Bootstrap -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
        <header class="col-md-2">
            <div class="logo">
                <a>
                    <img src="./img/xxxx.jpg" class="hidden-xs" />
                    <span class="visible-xs">阿里佰秀</span>
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                    <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
                    <li><a href="#" class="glyphicon glyphicon-modal-window">奇趣事</a></li>
                    <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
                </ul>
            </div>
        </header>
        <article class="col-md-7">
            <div class="news clearfix">
                <ul>
                    <li>
                        <a href=""><img src="./img/xxxx.jpg" alt="">
                            <p>>阿里佰秀</p>
                        </a>
                    </li>
                    <li>
                        <a href=""><img src="./img/xxxx.jpg" alt="">
                            <p>>阿里佰秀</p>
                        </a>
                    </li>
                    <li>
                        <a href=""><img src="./img/xxxx.jpg" alt="">
                            <p>>阿里佰秀</p>
                        </a>
                    </li>
                    <li>
                        <a href=""><img src="./img/xxxx.jpg" alt="">
                            <p>>阿里佰秀</p>
                        </a>
                    </li>
                    <li>
                        <a href=""><img src="./img/xxxx.jpg" alt="">
                            <p>>阿里佰秀</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="publish">
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                        <p class="hidden-xs">随着现在美甲的盛行，美甲已经成为小仙女们美妆过程中必不可少的一部分！也有一大批小伙伴们选择进入美甲这个行业，今天二姐就给美甲新手们分享十个美甲小技巧。</p>
                        <p class="text-muted">阅读(8888) 评论(2222) 赞(666) <span class="hidden-xs">标签：健康/指甲/皮肤/营养</span></p>
                    </div>
                    <div class="col-sm-3 pic hidden-xs">
                        <img src="./img/xxxx.jpg">
                    </div>
                </div>

            </div>
        </article>
        <aside class="col-md-3">
            <a class="banner" href="#">
                <img src="./img/xxxx.jpg" alt="">
            </a>
            <a class="hot" href="#">
                <span class="btn btn-primary">热搜</span>
                <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                <p>这里收录喜喜喜喜喜喜喜喜喜喜嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
            </a>
        </aside>
    </div>

</body>

</html>

index.css

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

body {
    background-color: #f5f5f5;
}

.container {
    background-color: #fff;
}


/* 图片自适应 */

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}


/* 修改container最大宽度为1280px */

@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

@media screen and (max-width:991px) {
    /* 导航栏并排 */
    .nav li {
        float: left;
        width: 20%;
    }
    /* 中间部分与上面加点距离 */
    article {
        margin-top: 10px;
    }
}

@media screen and (max-width:767px) {
    .nav li a {
        font-size: 14px;
        padding-left: 20px;
    }
    /* 图片1 2 2 */
    .news ul li {
        width: 50%;
    }
    .news ul li:nth-child(1) {
        width: 100%;
    }
    .publish h3 {
        font-size: 18px;
    }
    .publish .row {
        padding: 5px 0!important;
    }
}

header {
    padding-left: 0!important;
}

.logo {
    background-color: steelblue;
}

.logo span {
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}

.nav a:hover {
    background-color: #fff;
}

.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}

.news li {
    float: left;
    width: 25%;
    height: auto;
    padding-right: 10px;
    margin-bottom: 8px;
}

.news li:nth-child(1) {
    width: 50%;
    height: auto;
}

.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
}

.news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 0 10px;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    color: #fff;
}

.publish {
    border-top: 1px solid #ccc;
}

.publish .row {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.pic {
    padding-top: 30px;
}

.hot {
    display: block;
    margin-top: 20px;
    padding: 0 20px 20px;
    border: 1px solid #ccc;
}

.hot span {
    border-radius: 0;
    margin-bottom: 20px;
}

.hot>p {
    font-size: 12px;
}

效果图：
大屏：
在这里插入图片描述
中屏：

小屏：

超小屏：

YyykStudy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局与Bootstrap框架学习笔记

1.rem布局rem的大小基本单位是html的字体大小 <style> html{ font-size: 20px; } p{ width: 10rem; height: 10rem; background-color: pink; } </style> <body> <p></p> </body>2.媒体查询语法规范 @media mediatype and|not|o
复制链接

扫一扫

专栏目录