当前位置:首页 » 网页前端 » 前端尺寸
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端尺寸

发布时间: 2022-01-13 07:13:33

‘壹’ 一般做网页设计背景尺寸定多大

网页的背景多大要看对网页的要求的。

网页设计标准尺寸:

1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间,就不会出现水平滚动条和垂直滚动条。

为了做到主题鲜明突出,要点明确,应该使配色和图片围绕预定的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。

专业的网页设计,需要经历以下几个阶段:

需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,从而建立起营销模型。

以业务目标为中心进行功能策划,制作出栏目结构关系图。

以满足用户体验设计为目标,使用axure rp或同类软件进行页面策划,制作出交互用例。

以页面精美化设计为目标,使用PS、AI等软件,调整,使用更合理的颜色、字体、图片、样式进行页面设计美化。

根据用户反馈,进行页面设计调整,以达到最优效果。

以上内容参考:网络-网页设计

‘贰’ h5页面制作,设计多大的尺寸,怎么和前端适配,实现设计的视觉稿效果

H5的页面制作设计尺寸是有一定规范的,正常的话是考虑手机的适配问题,所以这个尺寸的话是基于手机来做的。

具体是多少呢?因为手机的尺寸是不一样的,特别是在比例上,这就要求我们在不同的手机上必须要保证内容的呈现,一定是完整的,但自己要考虑一个问题,要把内容分为重要的和不重要,重要的是什么呢,比如说背景图;重要的话就是放一些文字信息等等。

这样就划分了一个安全区和出血区,出血区和安全区交界的部分,就是不重要的,可以在各位手机上被裁掉的或者用来遮住手机页面背景的;但是安全的内容,是可以保证在任何大小屏幕手机上都可以完整显示。

一般安全区内框的尺寸是375X603PX,但在制作上又是另外一回事了,作铺满内框的图要按照这个尺寸的2倍大小去做。

出血区也就是外框尺寸是422X748PX,作铺满外框的图要按照这个尺寸的2倍大小去做。

这个你可以参考下意派Epub360的画布标准,这个工具是专业级的H5工具。

‘叁’ 移动端的h5页面的尺寸是多少

近来,大尺寸手机屏幕日趋主流,意派Epub360根据对主流大屏的计算,现新增大尺寸手机屏幕的画布,并命名为“微信Plus”。原来的普通微信尺寸将继续保留。

内容安全区:375*603(750*1206)

出血区:422*748(844*1496)

左右边框各:23.5px

上下边框各:72.5px

根据该画布,后续将会推出配套的layer组件等尺寸,即当选择使用该微信尺寸时,layer画布跟layer容器尺寸自动默认尺寸:375X603PX,方便调整。

‘肆’ 做手机网页要考虑哪几种尺寸呀

1、如果是比较复杂的页面,我们只需要第一屏撑满全屏,可以使用此方法。单独定义html和body的样式。【html,body{width:100%;height:100%;}】。

‘伍’ 前端设计稿过大的时候怎么算宽高

过大是指哪方面的过大?

如果是文件过大,就按照文件内的尺寸进行制作;
如果是设计的尺寸过大,原则是一定按照设计图制作,即便出了问题也是设计者的责任,网页宽度超出合理范围需要及时和设计者沟通,请确定一下几个内容:
1、这个尺寸是否是客户需要的尺寸;
2、客户是否需要响应式,适应不同分辨率和不同平面尺寸的页面;
3、如果第二点是,那么就应该有不同分辨率的设计稿;

‘陆’ HTML5移动网页的设计稿尺寸应该是多少

HTML5的移动端网页设计稿,通常情况下,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)
设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone 6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)
如果设计图稿过小,前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率
此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px*设计稿像素值)

‘柒’ 写html页面如何做到 尺寸固定 如果是浏览器或者屏幕变小。尺寸仍然不变 而不是div被挤变形

设置最小宽度属性。

<html>

<head>

<title>主页面</title>

<style>

body{

margin:0px;

width:1350px;

min-width:1024px;

max-width:100%;

height:100%;

background-color:#F0F0F0;

}

#head{

background-color:#FFFF00;

width:1350px;

height:100px;

min-width:1024px;

}

#center{

background-color:#00FFFF;

width:1350px;

min-height:100%;

position:relative;

min-width:1024px;

}

#foot{

background-color:#FF00FF;

width:1350px;

height:100px;

min-width:1024px;

}

#left{

width:150px;

height:100%;

background-color:#EEEEEE;

position:absolute;

margin-left:60px;

}

#main{

width:924px;

height:100%;

background-color:#EE00FF;

position:absolute;

margin-left:210px;

}

#right{

width:150px;

height:100%;

background-color:#EEFF00;

position:absolute;

margin-left:1134px;

}

</style>

</head>

<body>

<thead>

<divid="head">

你好

</div>

</thead>

<tbody>

<divid="center">

<divid="left"></div>

<divid="main"></div>

<divid="right"></div>

</div>

</tbody>

<tfoot>

<divid="foot">大家好</div>

</tfoot>

</body>

</html>

(7)前端尺寸扩展阅读:

注意事项

宽度属性为单词width,宽度width包含了两个重要的属性:最大宽度属性max-width和最小宽度属性min-width。最大宽度属性(max-width)用来定义宽度显示的最大值,当拖动浏览器边框使其显示范围大于最大宽度的时候,元素显示最大宽度值定义的宽度。

在最大宽度属性值中,可以使用三种属性值,分别为auto值、长度值和百分比值;最小宽度属性(min-width)用来定义宽度显示的最小值,当拖动浏览器边框使其显示范围小于最小宽度的时候,元素显示最小宽度值定义的宽度,在最小宽度属性中,可以使用三种属性值,分别为auto值、长度值和百分比值。

‘捌’ web前端,一张图片的实际尺寸为1334×662,屏幕分辨率比这张图片还高,前端如何设计铺满整个屏幕的

一般是这样的,
假设屏幕和图片宽度比 大于高度比 应该设置图片高度为屏幕高度,然后宽度等比拉伸并且居中;
假设屏幕和图片宽度比 小于高度比 应该设置图片宽度为屏幕宽度,然后高度等比拉伸并且居中;

‘玖’ UI界面设计尺寸应该是多少

01、界面设计尺寸及栏高度

(1)我们用Photoshop做设计新建画布应该设置多大呢?另外,iOS应用中的栏,包括状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?(注意:iOS严格规定了各个栏的高度,这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。

‘拾’ 手机前端页面尺寸

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

320dp:一个普通的手机屏幕(240X320,320×480,480X800)

480dp:一个中间平板电脑像(480×800)

600dp:7寸平板电脑(600×1024)

720dp:10寸平板电脑(720×1280,800×1280)

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad第一代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

以上是移动端的尺寸,单独的如果某一个移动的网站的尺寸是没有的,因为移动网站的一半情况是按照%比的尺寸 来自动适应屏幕的大小,或者也通过设置,iphone执行什么尺寸,安卓情况执行什么尺寸的。