移动web网页设计尺寸 第1篇
制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。
1、左右布局
灵活性强， UI的限制小，左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；
右侧为内容版块范围，是网站内容的展示区域。
2、居中布局
中间的黄色部分为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在；
3.主流电脑屏幕尺寸有以下几种：
一般网站内容显示的区域为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。
移动web网页设计尺寸 第2篇
字体设计的总原则是：可辨识性和易读性。
网页的中文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体
英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px、20px、26px或者30px 适用于突出性的标题内容。注意都是偶数原则，奇数像素会出毛边！
移动web网页设计尺寸 第3篇
移动端因为没有版心的存在用Flex布局是比较合适的
浮动通常用于PC布局，因为PC端有版心的存在、在以前Flex是有兼容性问题存在的，但是现在已经不在考虑兼容性问题了
趋势是Flex
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
不兼容低版本的浏览器，但是如果是写移动端页面，那不会有兼容性问题
查看是否兼容可用的一个好网址
设置方式
组成部分
注意：一定得是父元素
使用justify-content调节元素在主轴的对齐方式
使用align-items调节元素在侧轴的对齐方式
使用align-self代码案例
注意：只占用父盒子剩余尺寸
、小米布局案例
移动web网页设计尺寸 第4篇
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。他们的物理项目跟逻辑像素比是2:1的关系
二倍图设计稿尺寸：750px。
比如我现在从浏览器中找了一个移动端页面、宽度为750px,那么他在代码写的时候就是375px
因为有比例关系存在
物理是750px那么逻辑就是375px,2:1的关系，我们参考的就是逻辑像素
写小点会变大
所谓百分比布局、我们也叫做流式布局
效果就是：宽度自适应，高度是固定的
移动web网页设计尺寸 第5篇
1、网站设计及基本框架结构
Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
2、需要注意的几点:
尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.
如:red/left/big等。
组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
涉及到交互行为的元素命名
移动web网页设计尺寸 第6篇
响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）
无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）
我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。
常见的主要有如下几种方式：
1、布局不变，即页面中整体模块布局不发生变化，主要有：
2、布局改变，即页面中的整体模块布局发生变化，主要有：
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。