网站怎么适配各种尺寸的电脑_如何让网页在浏览器自适应屏幕大小

‘壹’ 怎么制作html5网站页面让它适应电脑和手机的尺寸

用以下代码开头：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

使用百分比定义宽度，，
CSS代码可以适当使用：
@media only screen and (max-width:449px){

}
自动根据屏幕像素调用不同的CSS代码。

‘贰’ 怎么让网页适应不同分辨率的电脑

以oppo R9 plus手机为例：

1、手机打开浏览器后，点按中间的[3]。

‘叁’ 如何让网页在浏览器自适应屏幕大小

方法：
1、在网页头部加上这样一条meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解释：
width=device-width ：宽度等于设备屏幕的宽度
initial-scale=1.0：表示：初始的缩放比例
minimum-scale=0.5：表示：最小的缩放比例
maximum-scale=2.0：表示：最大的缩放比例
user-scalable=yes：表示：用户是否可以调整缩放比例
另外：如果想控制字体的大小的话，应该使用相对大小，可以用下面这段代码，一般不用也可，这里只是说明一种方法。
相对大小的字体
字体也不能使用绝对大小px，而只能使用相对大小em。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {font-size: 1.5em; }
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

2、让网页适应不同的浏览器
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
a、不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
b、内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。
c、有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
d、对于只有几个像素宽度或高度的层，改用图片来实现。
e、避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。

‘肆’ 网页设计合适的页面尺寸是多少

网页设计选用的分辨率是72像素，使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。
全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域，内容限时区域在好控制在1000px-1200px。

‘伍’ 如何使网页自适应电脑屏幕分辨率，不管多大的分辨率都是全屏显示的

1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

‘陆’ 怎么实现网站的响应式布局，适合不同分辨率

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(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比例值，屏幕的纵横比。
例子：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@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)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://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="">
Accessible text

<noscript>
<img src="external/imgs/small.jpg" alt="Team photo">
</noscript>
</picture>
注：source: 一个图片源；
media: 媒体查询，用于适配屏幕尺寸；
srcset: 图片链接，1x适应普通屏，2x适应高清屏；
<noscript/>: 当浏览器不支持脚本时的一个替代方案；
<img/>: 初始图片；另外还有一个无障碍文本，类似<img/>的alt属性。
虽然<picture>目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill






<noscript>
<img src="external/imgs/small.jpg" alt="图片描述文本">
</noscript>

其原理就是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); /* Retina高清屏 */
注：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), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
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);
}
}

‘柒’ 如何调整网页大小与屏幕适应

第一种方法：可以按着Ctrl键，然后滚动鼠标滑轮对网页大小进行调整。调整到与电脑屏幕大小相适应的程度即可。

第二种方法：点击浏览器右下角的缩放页面比例，然后对网页进行相对应的调整即可。

‘捌’ 网页设计的宽度一般为多少应该怎么把握

网络统计流量研究院对于2017年上半年的分辨率使用情况统计得出。

排名第一的是360×640，这是竖屏，一般在医院、学校中才能见到，暂且不谈。

排名第二的是1920×1080，占比13.07%。

1366×768排第三，占比6.32%。这说明现在主流的电脑分辨率是1920×1080。

排名第七的分辨率，1024×768，是最小的电脑尺寸了，仅占3.13%，很少有人使用。在做pc端的网页设计时，不用考虑这个尺寸，而应在做pad端和手机端的适配时，将其纳入考虑。

而更高级的响应式网站应该是在严格的栅格规范下，适应于不同宽度，确保各宽度下的展示效果。但这样的成本也会相应增加，在开发网站时，需综合考虑实际需求和开发成本。time（《时代周刊》官网）是个很好的响应式网页案例。

(8)网站怎么适配各种尺寸的电脑扩展阅读

网页设计中的注意事项：

1、网页设计的尺寸标准：

面向1024-768显示器分辨率开发的网页尺寸，宽910px；

面向800-600显示器分辨率开发的网页尺寸，宽778px；

2、网页设计中的画布设定：

尤其注意分辨率为72 像素/英寸。

3、设计中的网页字体问题

中文字体：尤其注意“设置消除锯齿的方法”选项要选择“无”。

宋体是最常用的网页字体，12px 是中文操作系统可以表现的最小的字体，内容。

文字大小一-般用两种，12px 或14px(现在的新的vista据说能表现10px的中文字，但现在使用并不多)。

英文字体：其中英文字体最小表现为10px 字verdana字体是大多数网页使用的英文字体，比起arial字体更美观和均衡。

效果图：

网页效果图中的网页字体，虽然在最后制作网页的过程中不需要裁剪。但做为设计中不可分割的重要元素，一定要认真使用，因为你不单要设计文字与整体网页的关系，还要设计字体的样式表颜色。

‘玖’ 如何让网页自动适应显示器不同的“分辨率”

这里以魅族浏览器为例，其中的具体步骤如下：

1、手机打开浏览器之后，在中间位置点击【三】。

网站怎么适配各种尺寸的电脑

与网站怎么适配各种尺寸的电脑相关的内容