您现在的位置是： 首页> Mysql>Win7电脑上安装多个Mysql数据库 所属分类：Mysql
Win7电脑上安装多个Mysql数据库
初柒先生
2019-09-05 15:59
【mysql】
【window】
314人已围观
简介在本地安装多个版本的Mysql数据库，利用命令行进行管理数据库，其登录方式会比单版本数据库麻烦一下。登录命令如下：mysql -h localhost -P3308 -uroot -p 密码其中-P3308指的是访问端口3308，且P必须使用大写。普通的登录命令如下：mysql-uroot-p密码1、安装目的作为程序员，在平时开发上需要在本地的开发环境安装多个不同版本的Mysql数据库进行测试。如果分别安装在不同电脑电脑上，对我们程序的测试是很不方便的，这就要求...
网站如果使用响应式布局，就可以实现在不同的分辨率屏幕显示不同的布局。例如：同一网站在电脑端、平板端、移动端等屏幕显示不一样的布局。
本文将详细介绍响应式布局的原理，响应式布局是通过Html5+CSS实现，可以自适应不同的分辨率屏幕。具体是如何实现网站自适应的响应式设计？请继续阅读文章！
一、响应式布局框架的优点、缺点、原理
响应式布局的优点：
1、面对不同分辨率设备灵活性强
2、能够快捷解决多设备显示适应问题
响应式布局的缺点：
1、不能完全兼容所有浏览器
2、代码累赘、加载时间加长（响应式设计会增加代码量）
响应式布局的原理：简单地说响应式布局是通过css中Media Query（媒介查询）@media功能来实现，判断访问终端设备宽度指定访问内显示指定样式。
二、响应式布局示例
如果不明白响应式布局该怎么去实现？我们可以通过下面这个示例初步了解响应式布局的原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>响应式布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*通用样式*/
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
font-size:14px;
font-family:"微软雅黑";
text-align:center;
color:#fff;
}
.clear{clear:both;}
#header,#content,#footer{
margin:0 auto;
margin-top:10px;
}
#header,#footer{
margin-top:10px;
height:100px;
}
#header,#footer,.left,.right,.center{background:#333;}
/*PC端:当屏幕宽度大于960px显示下面样式*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{
height:400px;
float:left;
}
.left{
width:200px;
margin-right:10px;
}
.center{
width:540px;
margin-right:10px;
}
.right{width:200px;}
}
/*平板端:当屏幕宽度600px到960px范围下面样式*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{
height:400px;
float:left;
}
.left{
width:160px;
margin-right:10px;
}
.center{width:430px;}
}
/*手机端:当屏幕宽度小于600px显示下面样式*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="content">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
<div class="clear"></div>
</div>
<div id="footer">底部</div>
</body>
</html>
解释说明：
本示例是通过@media媒介查询来判断不同宽度的屏幕该执行什么样的CSS样式，也就是说，我们这个示例页面的响应式布局可以同时兼容PC端、平板端、移动端，用对应的CSS样式实现自适应的响应式设计。需要注意的是我们通过@media媒介查询来完成响应式布局，需要禁止用户对屏幕的缩放。如果不禁止的话，可能会对我们的布局造成显示上的错位，以至于我们设计的页面对用户不友好。
所以，我们需要在页面的头部添加禁止用户缩放屏幕的代码，代码如下：
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
很赞哦！ (0)
初柒先生
2019-09-05 15:59
【mysql】
【window】
314人已围观
下一篇：已经没有了
