移动端网页开发_什么是移动端开发[通俗易懂]

移动端网页开发_什么是移动端开发[通俗易懂]移动端网页开发移动端网页开发的两种方案:响应式网页开发一个新的网站。使用移动端的布局方式。响应式网页概念同一个网页会根据视口的不同,显示不同的样式。优缺点优点面对不同分辨率的设备比较灵活。比较快捷的解决多设备的显示适应问题。缺点如果兼容的设备比较多,则工作量比较大,效率比较低。代码会比较臃肿,加载时间会比较长。适用场景如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二_移动端网页开发

移动端网页开发_什么是移动端开发[通俗易懂]"

移动端网页开发

移动端网页开发的两种方案:

  1. 响应式网页
  2. 开发一个新的网站。使用移动端的布局方式。

响应式网页

概念

同一个网页会根据视口的不同,显示不同的样式。

优缺点

优点

  1. 面对不同分辨率的设备比较灵活。
  2. 比较快捷的解决多设备的显示适应问题。

缺点

  1. 如果兼容的设备比较多,则工作量比较大,效率比较低。
  2. 代码会比较臃肿,加载时间会比较长。

适用场景

  1. 如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。
  2. 如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二种方法,开发一套适用于移动端的网站。

如何开发响应式网页

媒体查询

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.实现方式

  1. 外链式 通过link标签的media属性来设置。
  2. 内嵌式 直接写在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

  1. portrait 竖屏 高大于宽
  2. landscape 横屏 宽大于高

逻辑判断

and:满足多个条件生效。

,:多个条件中满足一个时生效。

not :不满足条件时生效。

【注意】

如果存在多个max-width判断,则数值大的放在前面,

如果存在多个min-widht判断,则数值小的放在前面。

今天的文章移动端网页开发_什么是移动端开发[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/58901.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注