移动端网页开发
移动端网页开发的两种方案:
- 响应式网页
- 开发一个新的网站。使用移动端的布局方式。
响应式网页
概念
同一个网页会根据视口的不同,显示不同的样式。
优缺点
优点
- 面对不同分辨率的设备比较灵活。
- 比较快捷的解决多设备的显示适应问题。
缺点
- 如果兼容的设备比较多,则工作量比较大,效率比较低。
- 代码会比较臃肿,加载时间会比较长。
适用场景
- 如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。
- 如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二种方法,开发一套适用于移动端的网站。
如何开发响应式网页
媒体查询
css2就已经部分支持了,css3又新增了一些属性。IE8以下的浏览器不支持。
1.设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.媒体查询基本语法
@media 媒体类型 and (媒体特性){
样式
}
3.媒体类型
媒体类型可以理解为各种设备。
- all 所有的媒体类型
- screen 屏幕设备:电脑,智能手机,平板电脑。
- print 打印设备(极少)
- speech 屏幕阅读器(极少,给盲人用的设备)
4.实现方式
- 外链式 通过link标签的media属性来设置。
- 内嵌式 直接写在style标签中。
媒体特性
max-width min-width(重点)
max-width:x 小于等于x时生效
/* 媒体设备必须是屏幕设备, 小于等于1200px的时候生效。 */
@media screen and (max-width:1200px){
h2{
color: green;
}
}
min-width:x 大于等于x时生效
/* 媒体设备必须是屏幕设备, 大于等于1300px的时候生效。 */
@media screen and (min-width:1300px) {
h2{
font-size: 48px;
}
}
设备方向
属性:orientation
- portrait 竖屏 高大于宽
- landscape 横屏 宽大于高
逻辑判断
and:满足多个条件生效。
,:多个条件中满足一个时生效。
not :不满足条件时生效。
【注意】
如果存在多个max-width判断,则数值大的放在前面,
如果存在多个min-widht判断,则数值小的放在前面。
今天的文章移动端网页开发_什么是移动端开发[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/58901.html