pc端自适应布局vw（pc如何自适应布局）

本篇文章给大家说说pc如何自适应布局，以及你可能想了解pc端自适应布局vw对应的知识点，希望对各位能有一定的帮助，不要忘了收藏本站喔。

本文目录一览：

1、如何让一个pc页面自动适应手机屏幕？

2、pc端设计稿是2560如何自适应其他屏幕

3、pc端和移动端屏幕自适应

4、电脑软件如何适应缩放百分之120

5、pc、移动端 自适应布局方案

6、电脑显示器怎样适应屏幕大小

如何让一个pc页面自动适应手机屏幕？

页面自适应屏幕的方法（以下字母及标点为专业代码）：

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行viewport标签 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" / viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。

其次：

网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。

当然可以用width:auto;

第三，流动布局 .left{float: left;width: ***%;}

第四，选择加载css 这是自适应的关键部分 .abc{ height:300px; border:1px solid #000; margin:0 auto}  @media screen and (min-width: 1201px) {  .abc {width: 1200px}   }  /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */    @media screen and (max-width: 1200px) {  .abc {width: 900px}   }  /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */    @media screen and (max-width: 901px) {  .abc {width: 200px;}   }  /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */    @media screen and (max-width: 500px) {  .abc {width: 100px;}   }  /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */  需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

第四，图片自适应 img { max-width: 100%;} 老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

第五、采用相对字体大小 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。

pc端设计稿是2560如何自适应其他屏幕

pc端设计稿是2560自适应其他屏幕的方法：

最好使用百分比来设置。使用插件lib-flexible.js 可以自动计算屏幕的宽度，从而设置相的html的font-size。根据html的font-size来设置元素的大小宽高；设计稿是多少我们就设置多少；这个时候我们按照设计稿中的实际宽度px来画我们的样式；

最后会将px转成rem；通常来说PC端的页面并不像移动端页面那样对屏幕大小和分别率有那么强的... 插件，帮助你去做 inline.

pc端和移动端屏幕自适应

         做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。

1、最小尺寸分辨率1024 768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度。

2、1024 768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度。

3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签。

4、不支持css3、html5的脑残浏览器特别是=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了。

5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。

6、宽度自适应为不同宽度显示器写布局元素时常用的css。

电脑软件如何适应缩放百分之120

电脑软件缩放百分之120的操作步骤：

1、鼠标右键点击电脑屏幕，选择菜单中显示设置。

2、在打开的窗口中，点击缩放与布局下方位置的选项。

3、在弹出的菜单中选择想要进行缩放的比例，选择120%。

4、设置完成后，整个电脑屏幕的显示比例将比原来放大120%倍。

电脑显示屏大小不一样，当电脑显示屏比较小的时候，把电脑软件缩放120%，可以让桌面看的更舒服一点。

按住键盘的CTRL不松手，再转动滚轮向上，则文字放大，向下则文字缩小。

pc、移动端 自适应布局方案

写在前面

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080

使用了以下几种方案

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常

2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

3.当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

计算font-size的逻辑是:

当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个16PX(1920设计图时)的字体,那么REM设置值是0.16.

当窗口调整到非设计图的宽度如winWidth时,HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是说,1920下FONT-SIZE是100px.那么winWidth下,按比例计算.

或者可以这样:窗口宽1920时,FONT-SIZE是100PX,那么winWidth时,相当于窗口变化为1920时的 (winWidth / 1920).根据比例公式,winWidth时的FONT-SIZE就是 (winWidth/1920)*100

winWidth / 1920 = FONT-SIZE(PX) / 100

100 / 1920 = FONT-SIZE(PX) / winWidth 这个公式容易理解

如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化.因为REM正是参考HTML的FONT-SIZE值来计算的.

2、手机上,平板电脑上,更要使用REM,由于手机上一般不会调整浏览器大小,

所以可以在页面载入时,设置一次即可

电脑显示器怎样适应屏幕大小

想知道 显示器 怎么调整成适应屏幕的大小吗，下面是我带来的关于电脑显示器怎样适应屏幕大小的内容，欢迎阅读!

电脑显示器怎样适应屏幕大小?

电脑显示器大同小异，上面一般都会有“menu”、“auto”等按键，这些按键就是用来调整电脑屏幕大小的，可以通过这些按键调整电脑屏幕的长宽、高低，同时也具有自动校准功能。

示例1：液晶显示器如图，显示器标志“LG”的右侧有六个小按钮，第三个是“menu”按钮，点击该按钮，显示器上会出现菜单，选中校准屏幕大小的项目，调整屏幕的高低、长宽就可以了。第六个按钮是“auto/set”按钮，点击这个按钮可以还原到显示器的初始设置，电脑屏幕的大小就会自动校准。

示例2： 台式机 显示器如图，下面有六个黄色的按钮，最右边的是电源，左边五个的中间一个是菜单按钮，点击该按钮，进入显示器设置页面，之后的操作可以参考液晶显示器的 方法 。

通常情况下第一种方法可以解决问题，但显示器屏幕如果还是不能调整到理想状态的话，那么有可能是电脑的显卡驱动挂掉了，可以尝试给电脑重装一下显卡驱动。在百度搜索引擎里面输入“XXX 显卡驱动”(XXX是指需要调整屏幕大小的电脑的牌子以及型号)进行搜索，找到符合条件的显卡并将其下载安装就可以了。

如果是想要调整字体大小或分辨率大小，可以在电脑桌面上点击右键，选择“属性”，在“设置”选项内，调整像素的多少，点击“应用”，之后查看一下电脑上的字体和分辨率效果。如果不合适，继续调整屏幕分辨率直到满意为止。

看了"电脑显示器怎样适应屏幕大小" 文章 内容的人还看：

1. 电脑屏幕变小了怎么办

2. 电脑显示器怎么设置宽屏

3. 电脑显示器怎么调节比例

4. 电脑显示器怎么全屏显示

5. 2016家用电脑显示器多大最好

6. 电脑显示器的分辨率怎么调

7. 电脑显示器怎么设置对眼睛好

8. 电脑屏幕分辨率怎么调整

9. 电脑显示器怎么正确摆放

10. 电脑不能改成想要的分辨率怎么办

以上就是pc如何自适应布局和pc端自适应布局vw的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。