建议用：阿里云虚拟主机-基础型（1024M 主机，100M SQL数据库，千兆共享带宽），能备案，每年：130元。
希望可以帮到你，在线上。
青年服务器托管是是一台用户独享服务器，用户可以自行操作系统。服务器托管又称主机托管是客户自身拥有一台服务器，并把它放置在Internet数据中心的机房，由客户自己进行维护
移动web开发流式布局
浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
手机屏幕的现状
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口
meta标签
最标准的viewport设置
移动web开发——flex布局
传统布局
flex布局
建议
flex布局原理
父项常见属性
flex-direction设置主轴的方向
<!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>Title</title>
<style>
div{
/ 给父级添加flex属性 /
display: flex
width: 800px
height: 300px
background-color: pink
/ 默认主轴是x轴， 行 row， 那么y轴就是侧轴 /
/ 我们的元素是跟随主轴进行排列/
/*flex-direction: row/
/ flex-direction: column/
/ flex-direction: row-reverse*/
flex-direction: column-reverse
}
div span{
width: 150px
height: 100px
background-color: blue
color: white
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
justify-content 设置主轴上的子元素排列方式
flex-wrap设置是否换行
<!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>Title</title>
<style>
div{
/ 给父级添加flex属性 /
display: flex
/ width: 600px/
width: 80%
height: 400px
background-color: pink
/ 默认是不换行的， 如果装不开， 会缩小子元素的宽度放到父元素里面 /
flex-wrap: wrap
/ flex-wrap: nowrap/
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
align-items 设置侧轴上的子元素排列方式（单行 ）
<!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>Title</title>
<style>
div{
/ 给父级添加flex属性 /
display: flex
width: 100%
height: 400px
background-color: pink
flex-direction: column
justify-content: center
/ align-items: center/
/ 拉伸 但是不要给盒子高度 /
align-items: stretch
}
div span{
/ width: 150px/
height: 100px
background-color: blue
color: white
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
align-content 设置侧轴上的子元素的排列方式（多行）
<!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>Title</title>
<style>
div{
/ 给父级添加flex属性 /
display: flex
width: 400px
height: 400px
background-color: pink
flex-wrap: wrap
/ align-content: space-between/
/ align-content: space-around/
align-content: center
}
div span{
width: 150px
height: 100px
background-color: blue
color: white
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）