小屏幕大视野，如何让笔记本模拟出1920宽度网页效果

电脑教程022

小屏幕大视野，如何让笔记本模拟出1920宽度网页效果,第1张

作为UI设计师，我们在做web页面的时候会接触到各种各样的屏幕尺寸，最常用的有1920-1080、1440-900、1366-768、1280-800等，目前用户电脑中最大的尺寸当属1920了（Mac的5K屏幕可以忽略，用户基数太少）。 问题随之而来：很多设计师使用13寸和15寸的Retina MacBook，默认视觉分辨率（并非物理分辨率）只有1280-800和1440-900，有的公司不给配外接屏幕，那么如何用笔记本预览1920的网页效果呢？ Chrome浏览器的设备模拟功能可以帮助我们，只用一台笔记本就可以模拟任何屏幕尺寸。 如何在笔记本电脑上模拟大尺寸网页和手机网页 了解Chrome浏览器的设备模拟功能 1-在页面上右键选择检查 2-点击下方弹出层左侧手机图标 3-发现页面变化缩放了，点击顶部的设备切换按钮 4-选择Edit...打开设备编辑页面 在编辑页面中Chrome内置了很多常用的设备尺寸，平板、手机电脑都有。所以很多时候我们不用手机，在电脑中就可以模拟预览手机网站的页面效果。 接着我们来添加一个1920的屏幕尺寸，步骤见下图： 为了好区分，设备名称直接写1920，后面如果想添加1280，就写1280。 我们现在添加的是Web页面，所以一定要选择Desktop，手机的话选择Mobile。Chrome已经为我们设置好各种手机尺寸了，所以不再添加。 还有一点需要注意，高度我写的是960，并非1080，这是为什么呢？跟网页实际显示范围相关。 拿1920-1080屏幕电脑来说，实际上，网页的首屏展示高度并非是1080，而是要减去电脑系统的菜单栏和Chrome的各种栏目高度，大约是120，1080-120=960。所以我们的模拟尺寸高度也需要减小。如下图： 浏览器不一样可能这个值有所差别。在PC中，系统菜单栏是在下方，道理一样。 添加完1920的设备后，就可以在设备切换中选择1920来模拟了。 由于电脑屏幕小，只能显示以30%的缩放来展示，不过这个缩放比例可以调节，大家可以尝试下。 还有一种缩放网页的方法是直接减小网页比例，具体做法是快捷键cmd++/-。 但是缩小到一定程度，网页字体就不会再缩小，整个样式布局也会被破坏，效果很不好，不建议使用。 所以我们以后其实不需要申请外接屏幕，一样可以用笔记本预览大屏幕效果，希望本文能够给各位UI设计师带来设计效率上的提升。更多UI设计干货文章请关注UI黑客 微信公众号 uihacker UI黑客官网 http://www.uihacker.com/UI黑客论坛 http://bbs.uihacker.com/

1、首先，我们要打开DW，新建一个html文档。

2、新建后会出现一个界面，如下图。里面的代码都是自动生成的。

3、然后在</head>上面打上标题，如下图。通常我们是用<h3></h3>的格式，然后在里面填入标题，在刷新一下，就会在右边出现了。

4、接着我们再编辑正文，我们可以用<p></p>来编辑。编辑后刷新，就可以看到下图的效果。

5、如果你觉得只有文字，显得太单调，又可以输入<img scr=>，点击回车就可以选择你想要的图片。

6、刷新一下就完成了。