pc端和移动端自适应, 做响应式网页

469 阅读3分钟

一套代码能够兼容适配不同的屏幕设备,内容不变布局效果变了,这样的网页就是响应式网页

响应式和自适应的区别:

响应式是一套代码通过检测视口分辨率展示不同的页面布局效果样式,是指据屏幕的大小自动的调整页面的展现方式,可以实现用一个网页自动适应不同大小的屏幕,页面内容一样布局效果改变。

自适应布局是需要做多套页面,由服务端(根据用户代理)选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率,为不同设备提供不同版本的网站(网页)。

在开发中要想实现项目的响应式,建议使用媒体查询,在不同的宽度下显示不同的样式,1920下就是pc端的响应式,宽度设置的足够小可以匹配移动端的响应式

响应式是前端工作,同一个地址,一套代码在不同端(比如pc端和手机端)页面内容一样 展现不同的布局方式, (参考掘金网站)掘金的布局就是响应式,这里可点击掘金网站做对比,在F12调试工具下打开浏览器开发者工具的移动端模拟器刷新网站,和桌面端对比,会发现,页面内容基本一样,布局发生了变化。

自适应是多套代码在不同的设备上呈现完全不同的布局方式,页面内容也有所改变,自适应可以说是后端工作,是因为一般来说,自适应是需要多个版本的网页的,比如就是移动端一套,桌面设备一套,服务器收到用户请求后,会根据HTTP请求中的UA(User-Agent是一个特殊的字符串头,使得服务端能够识别客户使用的操作系统及版本,cpu类型,浏览器及版本,浏览器渲染引擎,浏览器语言插件等等)头判断设备类型,选择部署合适的网站版本。 (参考京东网站 ) ,在不同端下网站的地址也发生了变化,京东这种大型复杂网站使用的方式,网站的不同版本会发布到不同域名。最常见的是使用xxx.com和m.xxx.com域名。如果服务器判断出用户代理是移动端,则重定向到m.xxx.com域名(可打开京东网站用F12移动调试工具以便于更好的理解)

响应式布局你会发现这两个网站都用到了,当改变(放大或缩小)页面宽度的时候,页面的布局也在悄悄发生变化,响应式页面是不需要刷新的,当调试工具切换模拟移动端时,需要刷新网页才能呈现出自适应的网页(这也是响应式和自适应的一个区别)。

响应式布局你会发现这两个网站都用到了,当改变(放大或缩小)页面宽度的时候,页面的布局也在悄悄发生变化,响应式页面是不需要刷新的,当调试工具切换模拟移动端时,需要刷新网页才能呈现出自适应的网页(这也是响应式和自适应的一个区别)。

响应式网站:掘金

自适应网站:京东

———————————————— 版权声明:本文为CSDN博主「画了五官的猕猴」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/luoxiaonuan…