移动端网页开发

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

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

响应式网页

概念

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

优缺点

优点

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

缺点

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

适用场景

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

如何开发响应式网页

媒体查询

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判断，则数值小的放在前面。

移动端网页开发)------响应式网页相关推荐

移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分尺寸区间超 ...
2.4移动Web网页开发——响应式布局（含媒体查询和bootstrap）
响应式布局适合用于企业网站和非常非常小的布局,不适合电商网站(PC.移动分开做) 媒体查询视口宽度变化@media(max-width: 768px){} @media(max-width: 76 ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
12个最佳的响应式网页设计教程，轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
rem 前端字体_响应式网页设计:rem设置网页字体大小自适应
首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
响应式HTML网页开发,web开发中的响应式网页设计
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
响应式网页设计移动端页面布局
响应式网页设计将弹性布局.弹性图片.媒体和媒体查询三种已有的开发技术整合起来,并命名响应式网页设计媒体类型常遇到的媒体类型是 All(全部) Screen(屏幕) Print(页面打印或打印预览 ...
熹微~~~基于Vue开发的昏暗风格的响应式网页！
熹微网页介绍 1.项目简介熹微(dim-star),名字来源于晋代田园派诗人陶渊明的<归去来兮辞>: 问征夫以前路,恨晨光之熹微, 因为整个界面的风格是较为暗淡的,页面中的组件又总是给人 ...

移动端网页开发)------响应式网页