【博学谷学习记录】超强总结，用心分享|移动端特点

十月初金秋，国庆迎欢腾。大家好，不知道大家国庆假期过的怎么样，愿祖国繁荣昌盛的同时也祝我们生活繁花似锦，今天来分享一些关于移动端网页的特点。

首先让我们来想一想PC端网页和移动端网页的有什么不同之处？又如何在电脑里面边写代码边调试移动端网页效果？

PC端网页屏幕大，网页固定版心，浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）；手机屏幕小，网页宽度多数为100% ，移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性。

，一般都在谷歌模拟器里调试代码效果。

谷歌模拟器

屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量。

分辨率

PC端网页分辨率：1920 * 1080 ，1366 * 768 ……

缩放150% （1920/150%）*（1080/150%）

分辨率分类

物理分辨率是生产屏幕时就固定的，它是不可被改变的，硬件所支持的，屏幕出厂就设定无法修改。

逻辑分辨率是软件可以达到的，我们开发中写的是逻辑分辨率。

了解移动端主流设备分辨率

比较常用的是iPhone6/7/8。

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。

视觉视口。用户正在看到的网站的区域。

理想视口。设备有多宽，我的网页就显示有多宽。

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。

手机屏幕尺寸都不同，网页宽度为100% 。

网页的宽度和逻辑分辨率尺寸相同。

默认情况下，网页的宽度和逻辑分辨率不同，默认网页宽度是980px。

目标：网页宽度和设备宽度(分辨率)相同。

解决办法：添加视口标签。

视口：显示HTML网页的区域，用来约束HTML尺寸。

viewport：视口

width=device-width：视口宽度 = 设备宽度

initial-scale=1.0：缩放1倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸。图片分辨率, 为了高分辨率下图片不会模糊失真。

l 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

l 二倍图设计稿尺寸：750px。

关于移动端网页特点就分享这些啦，祝大家在这个国庆假期玩的开心，谢谢大家！

【博学谷学习记录】超强总结，用心分享|移动端特点相关推荐

[博学谷学习记录]超强总结,用心分享|第07节常用的API-----笔记篇
目录 1.API 1.1 API概述-帮助文档的使用 1.2 键盘录入字符串 2. String类 2.1 String概述 2.2 String类的构造方法 2.4 创建字符串对象的区别对比 2.5 ...
{博学谷学习记录} 超强总结,用心分享|狂野架构师-前置互联网架构演变过程
本章以系统架构,数据架构,两种维度来进行讲解目录 1 系统架构 1,1 单体架构 1.2 中台战略 2 数据库架构 2,1 单体架构 2.2 主从读写 2.3 分库分表 3 总结 1 系统架构 1, ...
[博学谷学习记录]超强总结,用心分享|架构 Nacos入门
提示:学习笔记欢迎指点文章目录前言一.Nacos安装二.Nacos服务注册与发现 1.服务提供者Provider 2.服务消费者Consumer 三.Nacos作为配置中心前言 Nacos ...
[博学谷学习记录]超强总结,用心分享|架构敏捷 - 开发管理之道
提示:学习笔记欢迎指点文章目录 1.敏捷开发思想之道 2.面向对象开发之道 3.敏捷学习之道 1.敏捷开发思想之道一名敏捷开发者,敏捷思想的掌握自然首当其冲.在敏捷开发实施的过程中,我们虽然不是 ...
[博学谷学习记录]超强总结,用心分享|第16节集合续-----笔记篇
目录 1.HashSet集合 1.1HashSet集合概述和特点[应用] 1.2HashSet集合的基本应用[应用] 1.3哈希值[理解] 1.4哈希表结构[理解] 1.5HashSet集合存储学生对 ...
[博学谷学习记录] 超强总结，用心分享|陌陌综合案例
注:大家觉得博客好的话,别忘了点赞收藏呀,本人每周都会更新关于人工智能和大数据相关的内容,内容多为原创,Python Java Scala SQL 代码,CV NLP 推荐系统等,Spark Flin ...
[博学谷学习记录]超强总结，用心分享|Hive的压缩格式
压缩格式工具算法文件扩展名是否可切分 DEFAULT 无 DEFAULT .deflate 否 Gzip gzip DEFAULT .gz 否 bzip2 bzip2 bzip2 .bz2 是 ...
[博学谷学习记录]超强总结，用心分享|软件测试之计算机基础（一）
本周开始学习软件测试,而我也即将开始在平台记录我的学习之路.我会把我的个人心得及掌握的知识发布在此平台,俗话说最好的输入就是输出,希望在输出的同时能有更多的收获,也希望与大家多多交流. 为了更好的学习 ...
[博学谷学习记录]超强总结，用心分享|人工智能机械学习基础知识线性回归总结分享
1.线性回归的核心是参数学习,线性回归和回归方程(函数)有关 2.线性回归是目标值预期是输入变量的线性组合 3.欠拟合的产生原因是学习到数据的特征过少 4.多元线性回归中的"线性" ...
[博学谷学习记录] 超强总结，用心分享|JavaEE就业课-尊享无忧+Java基础语法|面向对象(1wk)
学习笔记目录目录学习笔记目录前言一.变量 1. 关键字:被java赋予特殊含义的字符 2. 常量:不会发生改变的量(数据)编辑 3. 变量:内存中的存储空间. 4. 类型转换 5. 算术运算 ...

【博学谷学习记录】超强总结，用心分享|移动端特点

【博学谷学习记录】超强总结，用心分享|移动端特点相关推荐

最新文章

热门文章