手机网页制作尺寸 第1篇
1、界面尺寸布局：满屏尺寸750x1334px
2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；
3、各区域图标大小导航栏图标44px，标签栏图标50px；
4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；
5、常用的文字大小：32px，30px，28px，26px，24px，22px，20px；
6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；
8、单行文字的背景框的高度：88px，双行则为：176px，三行则为：264px；
9、常用间距：亲密距离：20px；疏远距离：30px，其它距离：10px，44px等；
10、按钮和文本框，原型图做成直角的，圆角半径是多少，由Ui来设计；
11、这种情况，需要修改原型。单个页面的逻辑流程图或用户学习使用时间，超过其它页面平均数的3倍以上；
手机网页制作尺寸 第2篇
1920x1080是一种常见的网页设计尺寸，也被称为全高清（Full HD）分辨率。这个尺寸通常用于显示器、笔记本电脑和大部分移动设备的屏幕。它提供了较大的工作空间，适合显示较多的内容和图像。
在网页设计中，1920x1080的尺寸可以用于创建，即能够在不同屏幕尺寸上自适应地显示。通过使用媒体查询和流体布局技术，可以确保网页在不同设备上以最佳方式呈现。
对于1920x1080的网页设计，需要考虑以下几个方面：
页面布局：在较大的屏幕上，可以使用更宽的布局来展示更多的内容。例如，可以在页面的左侧或右侧添加一个边栏，用于显示相关的导航链接、广告或其他信息。
图像和视频：由于1920x1080的分辨率较高，可以在网页中使用高质量的图像和视频。这些媒体资源可以更清晰地显示，并且可以更好地吸引用户的注意力。
文字和字体：由于屏幕较大，可以使用较大的字体和行距，以提高可读性。同时，需要注意在不同设备上字体的缩放和响应性。
✍ 总结：1920x1080是一种常见的网页设计尺寸，适用于大部分显示器、笔记本电脑和移动设备。在设计1920x1080的网页时，需要考虑页面布局、图像和视频的展示以及文字和字体的可读性。通过合理利用这个尺寸的特点，可以创建出吸引人的响应式网页。
1366x768是常见的网页设计尺寸之一。这个尺寸是指网页的宽度为1366像素，高度为768像素。它是一种常见的显示器分辨率，尤其在笔记本电脑和台式电脑上广泛使用。在设计网页时，选择1366x768作为设计尺寸有一些优势。
首先，这个尺寸适用于大多数常见的显示器分辨率，确保网页在不同设备上的兼容性。其次，1366x768的宽高比为16:9，与高清视频的宽高比相同，使得网页设计更加符合用户的视觉习惯。在实际应用中，设计师可以根据具体的需求和目标受众选择1366x768作为网页设计的尺寸。例如，如果目标用户主要是使用笔记本电脑或台式电脑的用户，那么选择1366x768可以确保他们能够获得最佳的浏览体验。
此外，设计师还可以使用响应式设计的方法，根据不同设备的屏幕尺寸和分辨率，为不同设备提供最佳的用户体验。无论是在1366x768的分辨率下还是其他分辨率下，都可以通过响应式设计来适应不同的屏幕尺寸和分辨率。
1280x800是一种常见的网页设计尺寸，它通常用于桌面电脑和笔记本电脑的显示屏。这个尺寸提供了足够的宽度和高度，以适应大多数网页内容，并且在大多数设备上都能够以合适的比例显示。
在这个尺寸下，网页设计师可以充分利用屏幕空间，展示更多的内容和功能。例如，可以在页面上同时显示多个列，以呈现更丰富的信息。此外，1280x800的尺寸也适合展示图像、视频和其他媒体内容，使用户能够获得更好的视觉体验。
然而，设计师需要注意，尽管1280x800是一种常见的尺寸，但并不是所有用户都使用这个尺寸的设备。因此，在设计网页时，应该考虑到不同屏幕尺寸和分辨率的适配性，以确保网页在各种设备上都能够正常显示和使用。
手机网页制作尺寸 第3篇
☆ 状态栏(status bar)：就是电量条，其高度为：40px；
☆ 导航栏(navigation)：就是顶部条，其高度为：88px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；
☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px
截图如下：
另外25学堂跟大家推荐3款 测量标注工具为：
MarkMan马克鳗，Dorado标注，PXcook像素大厨。
手机网页制作尺寸 第4篇
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
appearance: none;
margin: 0;
6. 当input输入框被软键盘遮挡时：输入框自动往上弹，兼容性比较好的方法是：document.getElementById(_account_).scrollIntoView(true);键盘弹出时是个延时过程加载调用该方法时需增加延时，同时对body{margin-bottom:150px}，
手机网页制作尺寸 第5篇
☆ iPhone6Plus是英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x736pt-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是安卓机目前最流行的大屏设计稿尺寸。
☆ iPhone6是英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x667pt-@1x。
☆ iPhone5是4英寸屏幕，640x1136px-@2x的像素分辨率，逻辑分辨率是320x568pt-@1x。
参考图片如下：
手机网页制作尺寸 第6篇
Pixso是一款由专业设计师开发和推荐的高效率、高性能的设计工具。它的强大功能已经足够满足任何专业设计师的需求。包括从创建原型到细节设计，再到与其他团队成员分享和合作，Pixso无一不包，无一不精。
Pixso的核心特点：
实时协作：Pixso的最大亮点之一就是它支持实时协作。你和你的团队成员可以同时在同一设计文件上工作，就像在Google Docs中一样。这使得整个设计过程变得极其高效，并且在任何设备上都能随时查看和修改。
简单易用：对于任何设计师来说，使用Pixso都是相当直观的。它拥有干净利落的用户界面，并且包含了所有必要的设计工具。无论你是初学者还是专业设计师，都能轻松上手。
多样性和灵活性：Pixso提供了大量的设计元素，如图形、文本和色彩，可以让你轻松完成设计。除此之外，还提供了各种各样的组件和模板，可以帮助你加快设计速度。
总的来说，网页尺寸并不是一个固定的数值，而是需要根据你的目标受众、他们使用的设备、屏幕分辨率以及他们的浏览习惯等多个因素进行调整。在设计你的网页时，始终以提供优质用户体验为首要任务，确保你的网页能够在任何设备上都能正常工作，并且容易浏览和使用。
手机网页制作尺寸 第7篇
1. 单位
先来罗列下学习移动页面构建的过程中可能看到过一些单位：
px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……
对上诉单位简单做个分类，并对其中一些关系进行比较
（1）什么是绝对长度单位？什么是相对长度单位？
网页中应用比较少。
相对长度单位：是手机网页设计中使用最多的长度单位，包括rem、px、em等。
px:在手机中和电脑一样是基于分辨率，但手机上同时寸屏幕的分辨率：可以是1- 3倍像素，iphone 6和7是2倍像素，iphone 6plus和7plus为倍像素，安卓手机中低档一般为2倍像素，高端机一般会做到3倍像素，对于做各种机型兼容px是无法满足的；如使用px作为基本上每个手机上显示的都会有差异
em:em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。对于页面中有多种字体大小的不适合；而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
rem：是基于一个根尺寸，最小只能设置12px，在media中指定不同分辨率下的根尺寸所有尺寸都以它为基准计算；用rem的好处是你写样式的时候长度只需要写一次，而且在开发工具上安装rem和px的转换工具可以自动转换，(在屏幕设置基准值为16px是一个比较好的转换值,这样为18,为20,为22)
（2）什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=厘米。常见的屏幕尺寸有、、、、、、、、、、等。目前 基本上是起的屏幕
屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080（红色点）蓝色点为1dp
屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是dpi或ppi。在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
计算像素密度的公式：
勾股定理算出对角线的分辨率：√(1920^2+1080^2)≈2203px
对角线分辨率除以屏幕尺寸：2203/5≈440dpi。
（3）什么是dp、sp、ppi、dpi、dip、mdpi、hdpi、xdpi、xxdpi？
这些单位主要用于手机app使用，对于手机web页面并不识别
ppi和dpi：屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。ppi和dpi是同一个概念，Android比较喜欢使用dpi，iOS比较喜欢使用ppi。
dp、dip：都是密度独立像素，可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。
mdpi、hdpi、xdpi、xxdpi：
像素密度：简单点就是非高清屏、高清屏、超高清屏。（dpi值越大越清晰）
dpi和转换参数的关系:
dpi我们都知道，是指像素密度；转换参数是指，dp与px之间的转换系数。
如下图，dp指蓝色块，px指红色块，很明显密度更大的右图中每个dp含有的px个数更多。可以得出结论：dpi密度越大，转换参数越大。 dp = （DPI/（160像素/英寸））px
所以对于不同分辨率的值dp也是固定的
对于apk最好使用的单位是dp而对于手机web页面最好使用的是rem
并且假设pc端和手机端的交互和页面设计变动不大的情况下使用rem完全可以只写一套页面，一套样式
对于手机端设计的图标通常分辨率会是2倍图或者3倍图来做的，这点要问清设计师
并且这段 meta标签很重要
user-scalable：用户是否可手动缩放
width=device-width：设置像素和屏幕等宽
initial-scale=：像素宽度和屏幕宽度的比值