首页 / BOOTSTRAP / 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含11998字,纯文字阅读大概需要18分钟。
内容图文
移动端web现状:
移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的,国内机操作系统也是基于Android开发的,因此在移动开发中只兼容主流浏览器,即处理webkit内核浏览器即可。
手机屏幕现状:移动设备的屏幕尺寸繁多,常见Android设备分辨率有:480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等;iPhone设备常见分辨率有:640x960、 640x1136、 750x1334、 1242x2208等;实际开发中大多使用px为尺寸单位,因此我们不关注分辨率。
viewport视口:
视口(viewport):指浏览器显示页面内容的屏幕区域,视口可分:布局视口、视觉视口、理想视口。
layout viewport布局视口:移动设备的浏览器默认设置一个布局视口,用于解决早期pc端页面在移动端显示问题。iOS、Android视口一般设置为980px,所以pc网页一般都可以在移动设备显示,只是元素看起来比较小,一般可以通过手动设置缩放视觉视口来显示网页。
visual viewport视觉视口:指用户正在看到的网页的区域。通过设置视觉视口来显示网站页面呈现在屏幕的区域,不会影响布局视口的变化。
ideal viewport理想视口:为了网站在移动设备上有理想的浏览和阅读宽度而设定。需要手动添加meta视口标签告知浏览器,它是乔布斯发明的,开启它需要meta视口标签,主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,布局的视口就多宽。视口属性:
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
二倍图:
物理像素(分辨率):指屏幕显示的最小颗粒,是物理真实存在的,是设备制造商出厂时就已经设置好了。实际开发时1px不一定等于一个物理像素(电脑端1px是等于物理像素的)。
物理像素比:指1px能显示的物理像素点的个数,或称屏幕像素比。
Retina(视网膜屏幕):把更多的物理像素点压缩到一块屏幕里,从而达到更高的分辨率,分辨率高则越细腻。
二倍图原理:由于图片色彩比较丰富,一张原大小的图放到移动设备后,会放大2倍,这样图片就会变的模糊,因此我们在制作图片时把图片制作成需求图的2倍大小,再通过css代码把尺寸设置为需求的大小,这样就会解决图片在移动设备因放大而变模糊的问题。随着科技的提升,现在也存在3、4等倍数的图,实际开发看公司需求。
移动端开发主流方案:
移动端开发主流方案有两种可选:
1、单独制作移动端页面(主流),当输入网址后自动判断设备,跳转到对应的网站。
2、响应式页面兼容移动端,同时兼容PC和移动设备,通过判断屏幕尺寸来改变样式。制作起来非常麻烦,需要调整兼容性问题。
移动端开发CSS初始化推荐:Normalize.css,保留了有价值的默认值,修复浏览器bug,模块化而拥有详细解说文档的文档,支持npm下载,其官网:http://necolas.github.io/normalize.css
盒模型推荐:box-sizing:border-box,移动设备多支持h5c3因此使用c3中的盒模型可以避免大量计算问题。
/*移动端部分特殊样式处理*/
-webkit-tap-highlight-color: transparent;/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-appearance: none;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
img,a {-webkit-touch-callout: none;}/*禁用长按页面时的弹出菜单*/
布局技术选型:
单独制作移动页面:流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局。
响应式页面开发:媒体查询、bootstrap
流式布局(百分比布局):把盒子的宽度设置成百分比,根据屏幕的宽度自动伸缩,不受固定像素的限制,内容向两边填充,是移动端布局常见的布局方式,也称非固定像素布局。实际中这种方式也不可能无限制的伸缩,因此一般要给父盒子max-width和min-width对其进行限制。
<style>
section {
width: 100%;
height: 600px;
max-width: 1000px;
min-width: 320px;
margin: 0 auto;
background-color: rgb(143, 228, 126);
}
section div {
width: 45%;
height: 200px;
}
section div:first-child {
float: left;
margin-left: 5%;
background-color: lightyellow;
}
section div:last-child {
float: right;
margin-right: 5%;
background-color: lightblue;
}
</style>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
flex伸缩布局:flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ,伸缩性在响应式布局中有很大作用,但是flex布局存在极大兼容性问题,因此flex布局在pc端并不常见,移动端支持良好。开启伸缩布局:给父级元素添加:display:flex;自己元素使用:flex:3;这个里的3表示占3份。
当父盒子设置为flex布局后(容器),子元素(项目)的float、clear、vertical-align属性失效。
主轴:默认是flex容器水平方向从左到右;
侧轴:默认与主轴垂直方向从上到下。父元素相关属性:
flex子项常见属性:
<style>
.box {
max-width: 1200px;
min-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
}
.box div {
height: 50px;
}
.box div:nth-child(1) {
background-color: rgb(240, 48, 48);
flex: 2;/*表示该子元素占2/8份*/
}
.box div:nth-child(2) {
background-color: rgb(201, 218, 49);
margin: 0 10px;/*给margin盒子不会被挤下去,自由伸缩*/
width: 100px;/*未给flex属性的元素可以设置宽度,设置完宽度后大该元素小不变*/
}
.box div:nth-child(3) {
background-color: rgb(17, 226, 59);
flex: 1;/*表示此元素占1/8份*/
}
.box div:nth-child(4) {
background-color: rgb(218, 19, 191);
flex: 4;/*表示该子元素占4/8份*/
}
/*总份数为:2 + 1 + 4 = 7*/
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
rem适配布局:rem是一个相对单位,类似于em,em指相对父系元素字体大小,而rem指相对于html元素字体大小。如:根元素设置字体大小为12px,非根元素设置字体大小为2rem,实际非跟元素的字体大小为24px,rem布局目前是比较流行的布局方式,非常重要。rem只是一个相对单位,可以设置给其他元素。
媒体查询(media query):使用@media查询可以针对不同的媒体类型定义不同的样式,从而轻松的解决屏幕大小适配问题。
@media mediatype and|not|only (media feature) {
/* 当同时有多个条件时,中间可以用and连接*/
}
<style>
@media screen and (min-width:320px) {
html {
font-size: 2px;
}
}
@media screen and (min-width:690px) {
html {
font-size: 4px;
}
}
@media screen and (min-width:1200px) {
html {
font-size: 6px;
}
}
.box {
width: 200rem;
margin: 0 auto;
}
.box div {
float: left;
width: 50rem;
height: 10rem;
box-sizing: border-box;
border: 1rem solid rgb(97, 245, 11);
font-size: 6rem;
text-align: center;
}
</style>
<body>
<div class="box">
<div>hello盒子</div>
<div>hello盒子</div>
<div>hello盒子</div>
<div>hello盒子</div>
</div>
</body>
媒体查询引入资源:针对不同的屏幕尺寸引入不同的css样式表,以层叠性实现不同样式:
/* <link rel="stylesheet" href="stylemin.css" media="mediatype and|not|only (media feature)"> */
<link rel="stylesheet" href="stylemin.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="stylemax.css" media="screen and (min-width:750px)">
rem适配方案技术:
①less + 媒体查询 + rem:通过媒体查询根据不同屏幕的尺寸设置不同的font-size,页面中元素尺寸选择rem值,元素rem值 = 设计稿尺寸(px) / font-size , font-size通常用屏幕尺寸除以划分屏幕的份数估量。
②flexible.js + rem(推荐):flexible.js是手机淘宝团队推出的高效简洁移动端适配库,可以避免写媒体查询这一步,我们只需确定font-size即可(它的原理是把屏幕分为10等份,font-size的值=设计稿的值 / 屏幕所分的份数)。此时页面元素的rem值为:页面元素的px值 / font-size ,flexible.js会自动计算,其GitHub地址:https://github.com/amfe/lib-flexible,将其下载后把里面的文件通过js标签引入:
<script src="js/flexible.js"></script>
cssrem:一款自动将px单位转换为rem单位的VScode插件。因为此插件中默认是参照16px转换的,因此需要自己手动配置参数(VScode设置----搜索框搜cssrem:root font size-----配置对应的参数)
响应式布局:随着屏幕尺寸的变化,布局发生相应的变化,不用单独写页面。
响应式开发原理:通过媒体查询针对不同的屏幕宽度改变父级容器大小,再改变里面子元素的排列方式和大小,从而达到适配不同设备的目的。
<style>
.container {
margin: 0 auto;
height: 200px;
background-color: rgb(209, 241, 153);
}
@media screen and (max-width:768px) {
.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>
<body>
<div class="container"></div>
</body>
Bootstrap:响应式项目开发中,bootstrap是一款当下很好用的前端框架。使用bootstrap的HTML骨架如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告知以IE的edge浏览器加载网页-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--开启视口-->
<title>Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet"><!-- 引入Bootstrap库 -->
<!-- 条件注释,第一个是解决html5新标签兼容性的,第二个是解决css媒体查询问题的 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 引入jQuery -->
<script src="js/bootstrap.min.js"></script><!-- 引入了bootstrap.js文件-->
</body>
</html>
bootstrap使用:此框架里面内置了很多类样式,使用时直接给标签加对应的类名即可。常用类名总结:
注意:bootstrap是一个非常丰富的前端框架,想要了解更多,请阅读官方文档:https://www.bootcss.com,下面将介绍移动端web开发中常用bootstrap部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.container {
margin: 0 auto;
background-color: rgb(245, 122, 50);
}
.box-first {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: rgb(176, 245, 137);
}
.box-second {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: rgb(229, 56, 251);
}
</style>
</head>
<body>
<div class="container">
<div class="box-first hidden-md hidden-xs"></div>
<div class="box-second visible-md visible-xs"></div>
</div>
</body>
</html>
.container容器默认有15px的左右内间距,而.row 有margin-left,margin-right值为-15px做拉伸,所以看到的是紧密的。
bootstrap栅格系统:把页面内容分成12等份,由行和列的组合的布局页面,网格状布局,在一个响应式容器中定义行和列。由类名row定义栅格系统的行,由col-x-n定义栅格系统的列。col-x-n中n表示所占栅格12份中的几份,x参数及含义如下:
栅格嵌套:每个栅格中是可以嵌套其它栅格的,就像div一样,可以相互嵌套。
栅格偏移:col-(lg/md/sm/xs)-offset-n,给某个栅格添加此类可以使这个栅格向后偏移n份。
栅格排序:col-(lg/md/sm/xs)-push/pull-n,将某个栅格push推后几份或将某个栅格pull拉前几份。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.container {
margin: 0 auto;
background-color: rgb(245, 122, 50);
}
.row div[class^=col] {
border: 1px solid limegreen;
height: 133px;
}
.inset div[class^=col] {
height: auto;
background-color: rgb(88, 236, 219);
}
.offset div[class^=col] {
height: auto;
background-color: rgb(230, 59, 193);
}
.arr div[class^=col] {
height: auto;
background-color: rgb(230, 59, 193);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div>
<!--栅格嵌套开始:-->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row inset">
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套a</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套b</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套c</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套d</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套e</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套w</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div>
<!-- 栅格偏移col-x-offset-n: -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row offset">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">栅格偏移</div>
<div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">栅格偏移</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div>
<!-- 栅格排序push推、pull拉 -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row arr">
<div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">栅格排序-左边</div>
<div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">栅格排序-右边</div>
</div>
</div>
</div>
</div>
</body>
</html>
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海
内容总结
以上是互联网集市为您收集整理的移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)全部内容,希望文章能够帮你解决移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。