前端页面开发如何达到自适应不同设备宽高的效果

想要达到这样的效果，有两种方法。

方法一，不使用固定的元素大小值，而是使用百分比，但是除非你开发的页面所需要的渲染相当直白，否则不推荐用。因为在CSS的开发中有很多用于渲染的样式，是不支持百分比的。并不是如你想象中的那样，每个元素的每种样式都能根据百分比自动去调配。比如说在一个测试页面中只写一个div，它的宽和高设置为百分比，从效果中会发现，如果不做出其他的渲染配合，这个div的高度是塌陷的，也就是说，在页面上看不到这个div。再比如内容字体的大小，大多数情况下，浏览器默认字体大小是16px，当你使用百分比去配置字体大小的时候，100%就意味着使用浏览器默认大小，但并不是所有的浏览器默认字体大小都是16px。像这种使用百分比来设置会出现问题的CSS样式相当多，所以如果你的页面不是简单到爆，那就不要直接使用百分比。

方法二，也是使用最广泛的方法，就是把网站以响应式的方式开发。需要注意的是，响应式本身拥有很多其他的叫法，有的地方叫流式开发，还有的地方直接叫n合1。不需要管不同的地方叫什么，只需要知道，这种适应不同设备展示效果可控的技术核心，是CSS提供的媒体能力，比如你可以写多个CSS样式，并在外链时检测浏览器可视宽度，只有符合宽高要求时才会生效

<link rel="stylesheet" media="screen and (max-width:600px) and (max-height:400pX)"href="style.css">

你也可以在一个CSS样式文件中，使用媒体能力写不同的样式，就和if else标签累死的逻辑

@media screen and (max-width: 200px) { 
     /* 应用样式 */
 }

从网站运行速度来考虑，推荐引入时检测屏幕宽高的方式