1、#160 #160 #160 #160 #160做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般；无论是电脑还是手机，要做到自适应屏幕，其实都是一样的首先，在网页代码的头部，加入一行viewport标签 ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， minimumscale=10， userscalable=noquot viewport是网页默认；margin0 padding0 html，body height100% line1，line4 positionabsolute width100% height50px zindex5 line1 top0 line2 positionrelative height50% zindex1 line3 positionrelativ；电脑浏览器html编辑器1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的lthead标签中，输入meta代码ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=1quot3浏览器运行indexhtml页面，此时PC端的网页在移动端上也能自动适配。

2、头部要加的是这个，放在ltheadlthead标签里，这是初始化手机屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你写的这段是要放在所有css样式后边的，以防止样式覆盖这段的意思是在电脑屏或者其他屏上你显示的是一个；在HTML5中设置图片自适应屏幕宽度，可以通过CSS中的background属性或img标签结合CSS样式来实现以下是两种方法的具体步骤方法一使用background属性创建HTML文件新建一个HTML文件，并添加基本的HTML结构添加CSS样式在HTML文件中或通过外部CSS文件，为包含图片的容器设置样式使用backgroundimage属性设置；自适应网站是一种网页设计技术，它能根据设备屏幕的大小和宽度自动调整布局，适应在不同终端设备上的显示这种设计被称为响应式，是一种HTML5的新技术自适应网站具有以下优势1它使用一套代码来支持PC端手机端和IPAD端，无需额外的代码2只需要一个后台账号管理，简化了管理流程3避免了；1，输入positionfixedtop0left0将整个div固定在屏幕的顶部和左侧2输入width100％height100％min－width1000px这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变3输入backgroundsize coverwebkitbackgroundsize c；后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow溢出，避免了水平滚动条的出现另外，绝对定位position absolute的使用，也要非常小心5 图片的自适应 图片的宽度和高度要按百分比来设定，千万不可以设定成固定大小HTML代码 ltimg width=quot95%quot src=quotquot alt=quotquot。

3、HTML中的图片可以通过以下几种方法实现自适应屏幕将图片作为div背景使用backgroundurl center norepeat可以确保图片自适应屏幕中心显示，并且不会出现横向滚动条如果希望图片在特定元素中占据完全空间，可以使用backgroundurl 0 0 norepeat scroll transparentbackgroundsize100% 100%设置图片的；html移动web开发是指针对手机设备进行的网页开发，其主要目标是确保网页能够在手机上流畅美观地展示随着智能手机的普及，网页设计师和开发者开始重视移动端的用户体验，尤其是在页面样式方面，需要进行相应的调整以适应小屏幕的显示需求目前，许多企业倾向于采用自适应网页设计Responsive Web Design， RWD；自适应手机屏幕代码ltmeta name=quotviewportquot content=quotwidth=devicewidthquotltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot 首先就是自适应说白了就是用百分比来设宽度，最外框肯定是用百分比的，但是；p首先你要在html页面头部加上下面的代码viewportquot，不懂可以百度content=quot，一些小的模块可以用固定尺寸meta ， name=quot再就是css中要应用到媒体查询，不能不用固定尺寸lt，其次你要把页面中的宽度修改为百分比width=devicewidth ，也就是@mediainitialscale=1quot解决方案2建议你看一。

4、用CSS3 @media 查询 也叫“媒体查询”语法aaawidth1200px 正常样式 下面是分辨率最小为300px，最大分辨率为1024px的样式 media screen and minwidth 300px and maxwidth1024px aaawidth375px 可以参考菜鸟教程CSS3 @media 查询。

5、ltmeta name=quotviewportquot content=quotinitialscale=1， maximumscale=3， minimumscale=1， userscalable=noquot这个申明是移动设备用的，11显示设备屏幕大小，禁止缩放二在手机上不能固定宽度，要按百分比写页面宽度才能自适应设备主要是这两点，当然细节上面还有很多和PC端不一样的地方我就不；要让手机版网页自适应手机屏幕宽度，可以采取以下几种方法1 **使用``标签**在HTML文档的``部分添加``这个`viewport`标签告诉浏览器如何控制页面的尺寸和比例，使得网页能够自适应不同设备的屏幕宽度`width=devicewidth`确保网页宽度等于设备屏幕宽度，`initialscale=10`设置初始缩放比例2。

6、要制作手机自适应网页，首先打开你所需要的html或者php等网页源码文件接下来，在文件的头部区域添加一个meta标签，这是为了让浏览器知道你的网页是为移动设备设计的具体来说，这个meta标签的内容是viewport的属性需要设置为“width=devicewidth， initialscale=1”，这样的设置可以确保网页能够根据设备；首先看你的背景图片大小，如果很大的话，一般情况下很多显示器都会显示的合适如果是想适应移动设备的，用一个CSS3属性 backgroundsizecover就可以了，可以将背景图根据窗口大小铺满整个浏览器窗口。