解析度怎么算 请问制作网站一般解析度是多少呀? 怎么实现网站在不同电脑解析度下都是适应的呀?
请问制作网站一般解析度是多少呀? 怎么实现网站在不同电脑解析度下都是适应的呀?
请问制作网站一般解析度是多少呀? 怎么实现网站在不同电脑解析度下都是适应的呀?
1024*768
一般网站上的LOGO的解析度是多少?
关于网站的LOGO,目前国际上规定的标准的广告尺寸有下面八种,并且每一种广告规格的使用也都有一定的范围:(单位:画素-px)
一、120×120,这种广告规格适用于产品或新闻照片展示。
二、120×60,这种广告规格主要用于做LOGO使用。
三、120×90,主要应用于产品演示或大型LOGO。
四、125×125,这种规格适于表现照片效果的影象广告。
五、234×60,这种规格适用于框架或左右形式主页的广告连结。
六、392×72,主要用于有较多图片展示的广告条,用于页首或页尾。
七、468×60,应用最为广泛的广告条尺寸,用于页首或页尾。
八、88×31,主要用于网页连结,或网站小型LOGO。
现在做网站都用多少解析度的啊?国外的电脑的解析度一般是多少啊?
主要还是要注意相容性,如果太大的话,别人的浏览器可能看起来很别扭.我觉得一般用1024*768
鸿合hz3700展台适应的解析度是多少
现在很多展台都是自动适应显示装置的,基本上从800×600,到1024×768,再到1920×1080的显示器,都可以连线展台使用的。
怎么实现网站的响应式布局,适合不同解析度
如我们需要相容不同萤幕解析度、清晰度以及萤幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?对此,马海祥觉的我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模组在不同尺寸下的位置:
那么我们具体要怎么做呢?
1、Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1" />
通过快捷方式开启时全屏显示
<meta name=apple-mobile-web-app-capable content="yes" />
隐藏状态列
<meta name=apple-mobile-web-app-status-bar-style content="blank" />
iPhone会将看起来像电话号码的数字新增电话连线,应当关闭
<meta name=format-detection content="telephone=no" />
2、使用Media Queries适配对应样式
常用于布局的CSS Media Queries有以下几种:
装置型别(media type):
all所有装置;
screen 电脑显示器;
print列印用纸或列印预览检视;
handheld便携装置;
tv电视机型别的装置;
speech语意和音讯盒成器;
braille盲人用点字法触觉回馈装置;
embossed盲文印表机;
projection各种投影装置;
tty使用固定密度字母栅格的媒介,比如电传打字机和终端。
装置特性(media feature):
width浏览器宽度;
height浏览器高度;
device-width装置萤幕解析度的宽度值;
device-height装置萤幕解析度的高度值;
orientation浏览器视窗的方向纵向还是横向,当视窗的高度值大于等于宽度时该特性值为portrait,否则为landscape;
aspect-ratio比例值,浏览器的纵横比;
device-aspect-ratio比例值,萤幕的纵横比。
例子:
@media only screen and (max-device-width:240px){
selector{ ... }
}
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
适用于布局的Media Queries,这里在马海祥部落格上我们就不再做详述,有兴趣的话,可通过官方文件进一步了解。
3、表格(table)的响应式处理
那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的侷限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法:
(1)、隐藏不重要资料列
处理前:
(点选检视大图)
处理后:
实现方法程式码:
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以使用者角度思考,每个人对资料的认知不同,或许你隐藏的资料对于他却是很重要的,所以对于这种方法马海祥并不推荐。
(2)、多列横向变2列纵向
处理前:
处理后:
实现方法:<thead>定位隐藏,<td>变块元素,并系结对应<th>列名,然后用伪元素的content:attr(data-th)实现<th>:
(3)、固定首列,剩余列横向滚动
处理前:
处理后:
实现原理程式码:
thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}
二、响应式内容
1、响应式图片
频宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;档案体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端型别尺寸解析度来适配出合理的图形。
处理原理:浏览器获取使用者终端的萤幕尺寸、解析度逻辑处理后输出适应的图片,如萤幕解析度320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端萤幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍解析度的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的萤幕引数可通过:screensiz.es/phone查询。
解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签<picture>,因为它还只是草案,目前还没有支援的浏览器,期待在不久的未来我们能用上。虽然目前不支援,但我们还是来了解下,为之后的内容做个铺垫。
<picture>是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,程式码规范如下:
<picture width=500 height=500>
<source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src=small-1.jpg alt="">
<p>Aessible text</p>
<!-- Fallback content-->
<noscript>
<img src=external/imgs/small.jpg alt="Team photo">
</noscript>
</picture>
注:source: 一个图片源;
media: 媒体查询,用于适配萤幕尺寸;
srcset: 图片连结,1x适应普通屏,2x适应高清屏;
<noscript/>: 当浏览器不支援指令码时的一个替代方案;
<img/>: 初始图片;另外还有一个无障碍文字,类似<img/>的alt属性。
虽然<picture>目前还不支援,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill
<span data-picture data-alt="图片描述文字">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- 浏览器不支援JS时的备用方案. -->
<noscript>
<img src=external/imgs/small.jpg alt="图片描述文字">
</noscript>
</span>
其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片,逻辑细节这里不再解析,感兴趣的可检视其JS程式码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片载入失败的替代方案。
当然,在未来的CSS Image Level 4中已经实现了响应式图片的原生语法:image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>
那么我们的响应式图片可以这样重写了
background-image:url(default.jpg);
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);
注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。
当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探。
2、高解析度(DPI)下的响应式处理
(1)、SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支援不完美。
(2)、Icon fonts:支援多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支援色彩丰富且复杂的图形,IE6渲染有毛边。
(3)、-webkit-image-set:只支援单个图形的适配,不利于图形合并,相容不完美(Safari 6+, Chrome 21+)。
JS检测:var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(min-resolution: 2dppx),
(min-resolution: 192dpi)
3、高解析度下的1px border
由于高清屏的特性,1px是由2×2个画素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。
在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
电脑19寸的一般解析度是多少?
1440×900 17寸宽屏液晶显示器1 9寸5:4显示器
以前是在解析度是800x600解析度下做的网页,但现在一般的电脑都是1024x768的解析度
很简单,在表格属性中,以前网页为800x600时,宽度设为759画素,刚好网页下方没有滚动条。在1024x768时,宽度设为900应该可以。你可以在预览中试啊。做网站这个不是难事啊。
电脑萤幕解析度与视讯解析度相适应的问题
区别就是一种软体级别插补,一种驱动级别插补,你在768P解析度下看720P电影,那48条线是通过播放软体来填补的,把视讯填补成768P,但是这样颜色通过过渡来转变,给人错觉就是模模糊糊,但可以通过软体增大对比度来降低错觉。
驱动级别是什么呢,你萤幕为720P解析度,就是有48条线是黑的,所以视讯就没有那个过度的颜色,也是可能给人感觉错觉的清晰。
最后一点,软体插补不同的视讯格式也是不同的效果,所以同样720P,每种格式效果都不太一样。

制作喷绘牌匾的解析度一般是多少呀?
喷绘档案往往是很大的,如果大画面还用印刷的解析度,那电脑就不能执行。比如Photoshop做图就不能超过30000画素点。但喷绘分辩率没有死标准,下面是制作不同尺寸的喷绘影象时使用的解析度(注意)影响到画面拼接时,需要切割档案,采用pixel/inch单位为整数时就会出现误差,而以pixel/cm单位为整数时就很准确了
色彩模式要求喷绘统一使用CMKY模式,禁止使用RGB模式。因现在喷绘机所支援的模式全都是CMYK模式,而用RGB模式做图,再转为CMYK模式的话,会使色彩起变化,最明显为黄色,RBG模式的黄色转为CMYK模式后,黄色里面会带有青色,这样喷出黄色会发绿,其它颜色也一样有变化,因为油墨和显示屏的成像原理完全不同,决定了RGB模式不能完全用CMYK模式来显示。因此喷绘和写真还是尽量采用CMYK模式。所以在做图的时候要按照CMYK标准。写真也要使用CMKY 模式
补充 400平方米以上 (解析度:10.16dpi) 4pixel/cm; 200-400平方米 (解析度:12.7dpi) 5pixel/cm; 120-200平方米 (解析度:15.24dpi) 6pixel/cm; 80-100平方米 (解析度:17.78dpi) 7pixel/cm; 60-80平方米 (解析度:20.32dpi) 8pixel/cm; 30-60平方米 (解析度:22.86dpi) 9pixel/cm; 20-30平方米 (解析度:30.48dpi) 12pixel/cm; 20平方米以下 (解析度:38.1dpi或以上) 15pixel/cm; 说明:影响到画面拼接时,需要切割档案,采用pixel/inch单位为整数时就会出现误差,而以pixel/cm单位为 整数时就很准确了,因为我们是完美主义者。 写真解析度一般情况下72dpi就可以了,如果档案过大(如在Photoshop选单,image/image size 显示实际尺 寸时档案大小超过400兆),可以适当的降低解析度,把档案控制在400兆以内即可。 储存格式要求: 喷绘和写真的影象最好储存为.tif 格式,如果采用压缩(LZW Compression)的格式,不失为一个好办法。不 仅可以减少空间,节省档案传输频宽,而且对画面根本就没有质量损害。 CorelDRAW 汇出时注意: CorelDRAW 软体汇出点阵图时,不能超过10000pixel,否则就会使画面压扁。这时就需要切割画面,切割一块 不能超过10000pixel,最多只需切割三块。因为超过30000pixel,Photoshop就没有办法处理档案了。 Illustrator 汇出时注意: Illustrator结合Photoshop相当完美,但是档案导大之后,有时也会出现一些低阶的错误,需要注意。 色彩模式要求: 喷绘统一使用CMKY模式,禁止使用RGB模式。因现在喷绘机所支援的模式全都是CMYK模式,而用RGB模式做图, 再转为CMYK模式的话,会使色彩起变化,最明显为黄色,RBG模式的黄色转为CMYK模式后,黄色里面会带有青色, 这样喷出黄色会发绿,其它颜色也一样有变化,因为油墨和显示屏的成像原理完全不同,决定了RGB模式不能完全 用CMYK模式来显示。因此喷绘和写真还是尽量采用CMYK模式。所以在做图的时候要按照CMYK标准。写真也要使用 CMKY 模式。且如要对色彩有特殊要求(如标准色等),则需提供对色稿给我们,我们会调整画面颜色,接近小样 黑色部分要求: 喷绘和写真严禁出现单色黑(C=0 M=0 Y=0 K=100),必须C、M、Y、K组成四色黑。例如Photoshop的预设黑 (C=75 M=68 Y=67 K=90),否则喷绘画面上黑色部分会出现横道,且单色黑显灰,影响整体效果。如果有些档案 出现单色黑,那又如何解决呢? 一、可以把CMYK模式的档案先转成RGB模式,然后再转成CMYK模式。前提是单色黑 必须符合K=100的条件; 二、可以用选取工具,选择后直接填充预设黑; 三、Photoshop选单下,image/adjustme nts/selective color 选择颜色来调整黑色。
解析度1366X768怎么样?一般高清解析度是多少?
笔记本十几寸就可以了,看电影不是看解析度大小的,而是看电影档案本身是否清楚,分超高清,高清,普清等!在则看你是否对它进行过处理,比如你看得虽然是240*320的高清!但是你全频成你电脑大小后画质就会有所下降的!