7个步骤让PC网站自动适配手机网页.pdf

7个步骤让PC网站自动适配手机网页 以下是从给定文件中生成的知识点： 1. 允许网页宽度自动调整：在网页代码的头部，加入一行viewport元标签，以实现网页宽度的自动调整。viewport是网页默认的宽度和高度，可以设置网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为 1.0 。 2. 不使用绝对宽度：由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。CSS 代码不能指定像素宽度，需要使用百分比宽度或width:auto。 3. 相对大小的字体：字体也不能使用绝对大小（px），而只能使用相对大小（em）。可以在CSS代码中指定字体大小的相对值，例如body{font:normal 100% Helvetica,Arial,sans-serif;}，然后在其他元素中使用相对大小的字体大小，例如h1{font-size:1.5em;}。 4. 流动布局（fluidgrid）：流动布局的含义是，各个区块的位置都是浮动的，不是固定不变的。可以使用float属性来实现流动布局，例如.main{float:right;width:70%;}和.leftBar{float:left;width:25%;}。 5. 选择加载CSS：CSS3引入的MediaQuery模块可以自动探测屏幕宽度，然后加载相应的CSS 文件。可以使用media=” screen and (max-device-width:400px)”href=” tinyScreen.css” />来加载不同的CSS 文件。 6. CSS 的 @media规则：同一个CSS 文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS 规则。可以使用@media screen and (max-device-width:400px){.column{float:none;width:auto;}#sidebar{display:none;}}来实现屏幕宽度小于400 像素时的样式设置。 7. 图片的自适应（fluidimage）：可以使用img{max-width:100%;}来实现图片的自动缩放。这行代码对于大多数嵌入网页的视频也有效，可以写成：img,object{max-width:100%;}。老版本的IE 不支持max-width，可以使用img{width:100%;}来实现图片的自动缩放。 通过这7个步骤，可以让PC网站自动适配手机网页，实现移动适配技术。切图网是国内首家基于web技术服务的公司，提供移动适配技术的解决方案。