5种方法教你用自适应网页适应所有屏幕宽度

资料来源：网络整理时间：2023/3/22 3:15:01 共计：3569 浏览

　　随着互联网网络与科技的快熟发展，越来越多的移动端手机厂商开始打起移动端手机之间的战争，移动端手机的快速发展也使得越来越多的人开始使用移动端手机上网。手机端移动设备正超过桌面设备，成为浏览访问互联网的最常见终端。那么就会出现一个问题，如何才能让PC电脑端的网页页面在移动端手机上正常显示？移动端手机与PC的屏幕宽度有着很大的区别，会造成同样的信息内容在移动端手机与PC电脑端出现两种不同的显示结果。那该如何才能使得移动端手机与PC都能对网页页面呈现出令人满意的结果呢，本文收集了以下5种方式方法，有兴趣的小伙伴们可以看下：

　　1、在网页页面代码的头部，加入一行viewport元tag标签

　　viewport是网页页面默认的宽度和高度，上面这行代码的意思是，网页页面宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页页面初始大小占屏幕面积的100%。

　　注意：该方式不支持IE8及IE8以下的版本

　　2、不使用绝对宽度

　　由于网页页面会根据屏幕宽度调整部署布局，所以不能使用绝对宽度的部署布局，也不能使用具有绝对宽度的元素。对图像来说也是这样。

　　具体说，CSS代码不能指定像素宽度：width:xxx px;

　　只能指定百分比宽度： width: xx%; 或者 width:auto;

　　3、使用相对大小的字体

　　字体也不能使用绝对大小（px），只能使用相对大小（em或者rem）

　　例如： body

　　上面的代码指定，字体大小是网站页面默认大小的100%，即16像素（1em=16px）。

　　h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）

　　将想要的像素去除默认的16像素可以得到em

　　4、流动部署布局（fluid grid）

　　"流动部署布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

　　.main

　　.leftBar

　　float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

　　5、媒体查询器@media

　　"自适应页面结构网页设计"的核心，就是CSS3引入的MediaQuery模块。

　　它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

　　上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

　　如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

　　易点科技（www.eidea.net.cn）成立于2009年，一直专注于IT顾问咨询、信息第三方平台系统建设开发、公司企业互联网网络方案解决与规划管理运营。服务信息内容包含pc+移动端手机响应网站制作网站建设、B2C购物商城定制型需求开发、微信公众号定制型需求开发、公司企业管理小型系统定制型需求开发。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：网站建设为什么大量使用响应式网站？ | ·下一条：自适应网站图标应如何使用？