手机移动网页设计 第1篇
如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ;
代码示例 :
显示效果 :
设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视口 ; body 中的文本 显示正常 ;
推荐视口标签写法 : 所有的手机端网页都设置如下样式 ;
代码示例 :
显示效果 :
手机移动网页设计 第2篇
如今，市场为消费者提供了各种各样的移动端网页。那么，我们应该如何突破竞争对手，吸引消费者的注意呢？首先，你需要定义你的移动端网页必须具备什么功能。这是一个可以推送即时消息的社交功能吗？还是可以为用户提供一个自助点餐的平台？
在建立您的移动端网页之前，您需要构思您理想的移动端网页功能列表，然后根据目标组最想要的内容对这些项目进行优先级排序。一个直观的例子，现在，用户可以在Instagram中体验到拍照、表扬、搜索、视频故事等十多个功能。然而，当Instagram首次发布时，它要简单得多，只包括验证客户需求所需的最小功能集。随着该移动端网页的日益流行，Instagram逐渐解决了用户想要的其他功能，并多年来一直在扩展该移动端网页的功能。
在您的优先页面上选择前3-4个功能，并为它们设计您的移动端网页。一旦你确认你的想法会引起用户的共鸣，并且用户真的想要它们，你就可以添加其他功能。该网页有助于验证您的移动端网页的核心功能是否满足用户的需求，因此您必须明确移动端网页的功能。
手机移动网页设计 第3篇
在这一步中，您可以使用该工具将您的手稿和线转换为数字网页，并与您的目标用户分享该网页，以便他们提供感觉反馈。首先，根据您的线手稿构建移动端网页屏幕。您可以通过添加按钮、文本字段和其他UI元素来进一步优化操作界面，并大胆尝试使用不同色块的冲击。值得一提的是，市场上大多数网页工具都很丰富 iOS 和 Android UI 因此，您可以快速构建具有专业外观的移动端网页。
网页制作不仅让你的产品对用户更真实，而且让测试人员真正感受到移动端网页的感觉，让开发人员在最终决定之前更好地了解预期的用户体验设计。
移动终端应用网页设计的有用方法：
手机移动网页设计 第4篇
1）多个盒子横向排列使用什么属性
2）设置盒子间的间距使用什么属性
margin
3）需要注意什么问题？
浮动的盒子脱标
设置为Flex的盒子是不会进行脱标的，即使是没有设置高度，也可以根据子级的内容给撑开
1）是一种浏览器提倡的布局模型
2）布局网页更简单、灵活
3）避免浮动脱标问题
4）检查属性是否可以使用
在上面的网站上可以查到一个属性在哪些浏览器上可以使用
5）作用
a.基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
布局非常适合结构化布局
6）设置方式
给父元素添加display:flex，子元素可以自动的挤压和拉伸
7）组成部分
弹性容器（父级）
弹性盒子（子级）
只需要给父级添加一个display:flex就可以实现横向一排排列
1）目标：使用justify-content调节元素在主轴的对齐方式
2）思考：网页中，盒子之间有间距吗？
答：有
在Flex布局中，可以调节主轴或侧轴的对齐方式来设置盒子之间的间距
3）修改主轴对齐方式属性：justify-content
4）center的效果：实现的是盒子的容器
5）space-between实现的效果：间距在盒子中间显示
6）space-evenly：所有的盒子的间距都相等
7）space-between：盒子的两侧添加边距
1）目标：使用align-items调节元素在侧轴的对齐方式
2）修改侧轴对齐方向属性
align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
1）如果没有使用弹性盒子来进行布局，那么没有写宽度，默认就是100%，也就是浏览器页面的宽度，没有写高度就是0
2）如果没有使用弹性盒子来进行布局，那么没有写高度，默认是0，需要设置来让盒子的高度为浏览器的高度
2）如果一个子级属性宽度或者高度写成了100%，那么他的高度或者是宽度就等于是父级的高度或者是宽度
3）如果使用了弹性盒子来进行布局，那么子级如果没有写高度或者是align-items的值是stretch，那么他的高度就是父级的高度，如果写了高度就是写的高度，如果没有写高度他的align-items是center的话那么就是他的内容的高度
4）如果使用了flex来进行布局，没有写宽度，那么盒子的宽度就是内容的宽度。
1）目标：使用flex属性修改弹性盒子伸缩比
2）属性：
flex:值
3）取值分类：
数值（整数）
4）只占用父盒子剩余尺寸
手机移动网页设计 第5篇
媒体查询
屏幕宽度不同，网页元素尺寸不同（等比例缩放）
> 相对单位
> rem单位是相对于HTML标签的字号计算结果
> 1rem = 1HTML字号大小
使用rem之前需要将html设置字号
a.手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
b.设备宽度不同，HTML标签字号设置多少合适？
a.目标：能够使用媒体查询设置差异化CSS样式
b.写法
目前rem布局方案中，将网页等分为10份，HTML标签的字号为视口宽度的1/10
a.目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
单位尺寸
> 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度----> 确定参考设备宽度（视口宽度）---->确定基准根字号（1/10视口宽度）
> rem单位的尺寸
rem单位尺寸 = px单位数值/基准根字号
a.目标：使用实现不同的窗口适配
b.我们需要根据不同的视口宽度进行不同的媒体查询来设置字号大小，但是每个手机的宽度都不一样，如果自己写得写好多媒体查询，导入了flexible文件，就可以不用写媒体查询来进行适配
手机移动网页设计 第6篇
1）PC端网页和移动端网页有什么不同？
屏幕大，网页固定版心
b.手机屏幕小，网页宽度多数为100%
1）我们可以通过京东看一下，一般会有一个PC端的网页和移动端的网页，移动端的网页一般是m开头，俗称m站，就是一个类似于手机应用的网页，不过他和手机应用不同的点是，m站是需要通过浏览器输入网址来进行登陆的，而手机app之间下载就可以
2）可以查看一下京东的pc端网页
3）查看一下京东的m站的网页
这个就类似于手机应用，但是是在页面进行显示，我们可以通过检查源代码的方式，然后通过下面的手机按钮，给调成手机模式
1）目标：了解屏幕尺寸概念
2）屏幕尺寸
> 指的是屏幕对角线的长度，一般用英寸来度量
3）了解移动主流设备分辨率
PC分辨率
1920*1080
1366*768
......
4）总结：
a.硬件分辨率（出厂设置）
b.缩放调节的分辨率（软件设置）
5）分辨率分类
a.物理分辨率是生产屏幕时就固定的，它是不可被改变的
b.逻辑分辨率是由软件（驱动）决定的
6）思考：制作网页参考物理分辨率还是逻辑分辨率
答：逻辑分辨率
7）移动端主流设备分辨率
1）目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
2）手机屏幕尺寸都不同，网页宽度为100%
3）网页的宽度和逻辑分辨率尺寸相同
4）网页的宽度和设备宽度（分辨率）相同
解决办法：添加视口标签
1）目标：能够使用像素大厨软件测量二倍图中元素的尺寸
2）设计师给的是物理分辨率的图，二倍图
3）网站以二倍图居多，为了让图片更加的清晰
4）设计师给的是二倍图，是物理分辨率，但是我们书写的时候是根据逻辑分辨率来写
5）设计稿的时候要选择2x来进行设计
6）不管设计图给的是几倍，最终都转换成他的逻辑分辨率就可以