pc端设计稿是2560如何自适应其他屏幕
pc端设计稿是2560自适应其他屏幕的方法:
最好使用百分比来设置。使用插件lib-flexible.js 可以自动计算屏幕的宽度,从而设置相的html的font-size。根据html的font-size来设置元素的大小宽高;设计稿是多少我们就设置多少;这个时候我们按照设计稿中的实际宽度px来画我们的样式;
最后会将px转成rem;通常来说PC端的页面并不像移动端页面那样对屏幕大小和分别率有那么强的... 插件,帮助你去做 inline.
1、在不同分辨率下,页面布局存在不同程度的差异,特别是页面上的表单控件,其宽度默认是固定值width:150px,当分辨率较高时,表格中的空白显得过多,页面布局显得很不协调,在宽屏显示器上尤为明显。
2、内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏。 注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的,但是也可以完美的适应不同的屏幕。
3、然后在css中 有关margin和padding属性直接用百分比来表示 页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调,这就是流式布局的最致命的缺点,往往只有几个尺寸的手机下看到的效果是令人满意的。
4、一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得不堪入目,这是个很值得注意的问题。 问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。
5、在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,上面说过rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
6、浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。
1、pc端网页的设计稿尺寸是宽度1920px,高度最小是1080px , 主体内容在1200px内就行,比较规范。
2、移动端网页的设计尺寸可以考虑680px和720px