5自适应网站制作时经常会遇到的一个问题，电脑端页面缩小到手机端页面内后发现有些栏目，有些图片太大或者影响美观，那么这个问题在吗解决呢？

手机端最典型的就是iphoenplus最大宽度是414目前市场上占有率最大的大屏手机也差不多是这样，所以就可以写成当屏幕尺寸小于414px的时候屏幕下面所有的样式，为了不产生屏幕大小不一产生不同的样式错乱，所以这里建议写到480px，这样就囊括了基本上所有的手机屏幕了。

然后接下来就是隐藏手机屏幕下不该显示的内容，比如手机端我不想让别人看到我的友情链接，或者不想让显示出来太大的幻灯片。都可以用 display:none;这个命令来实现。

@media only screen and (max-width: 480px){

.footer {

display: none;

}

}

css隐藏内容主要分为3总情况：

①隐藏所有内容无空白：display: none;

②隐藏溢出的文字或图片：overflow:hidden;

③隐藏内容但是仍然占据空间：visibility:hidden;

网站自适应css隐藏只是基础知识，对于隐藏最常见的用途就是js的一些特效展示。

来源：王尘宇博客，欢迎分享

文主要介绍了网页布局中左侧固定，右侧自适应的两种实现方法，相信对大家初学网页布局会有很好的帮助！

第一种方法代码如下：

第二种实现方法代码如下：

想学习更多技术，请关注“恒星网络”头条号！

than Marcotte曾经在A List Apart上发表过一篇名为“Responsive Web Design”的文章，他当时就提出了响应式架构的概念（不少混迹技术圈的肯定看过这篇文章，这里就不再赘述了）。随着终端设备的日益丰富，无法针对设备类型、尺寸或浏览器进行自适应调整的图像会严重减慢网站的访问速度，最终导致用户流失。

谈到图片自适应，很多前端开发人员会不假思索的来一句“宽度100%”，但是在宽度自适应的同时如何保证图像不失真呢？近日，关于该问题一位网友的回答引起了大家的激烈争论，我们先来看看这位网友是如何解决该问题的：

没错，就是这么一行简短的代码！部分前端开发者认为这行代码既简洁又高效，很好地解决了图片自适应问题，但有部分前端开发者认为这种方法无法解决分辨率问题，无法保证图片不失真，这个问题到底应该如何解决呢？

一个图像版本显然是不够的，为了确保各个屏幕尺寸之间的平滑过渡，设计师必须以不变应万变。也就是说，必须采取静态的方式使图像适应性更强。对于灵活的布局大小和屏幕密度的多样性都有相同的解决方案：提供可变分辨率的图像。图片分为背景图片和通过img标签引入的图片，我们是应该使用高分辨率图像来利用高分辨率硬件，还是使用小图像以便在低分辨环境中快速加载？

通过提供同一图像的不同版本（大小和分辨率），可以向需要的网站访问者发送高分辨率版本，为不具有此功能的网站提供较低分辨率的版本。要了解需要多少不同版本，可以采取以下步骤：

• 建立尺寸和分辨率范围的极限，并记录各种尺寸和分辨率。

• 使用新的响应式图像标记来标记备用版本，以便浏览器可以加载最适合用户屏幕分辨率和窗口大小的版本。

具体到代码级，前端开发应该怎么做呢？

某知识平台中标签为“JavaScript开发者”的网友的回答赢得了不少人的赞同：

面对格式问题，我们可以尽量让浏览器替我们决定。过去，实际上只有四种图像格式具备通用接受性：GIF，JPEG，PNG或SVG。然而，今天的响应式，太多可变格式的图像允许开发者使用新的技术，以便可以在支持的浏览器中使用其他更新更好的格式，在不支持的浏览器中继续使用旧格式。

当然，也有网友提到了一种未来可能被大量普及，但目前已经被应用有效果的解决方案，同时该解决方案也是开源的：

如果对这部分很感兴趣，不妨读一下《Head First Mobile Web》一书，这本书中提到过一个叫http://Sencha.io Src的第三方服务，把img的src属性设置为http://scr.sencha.io/http://xxxx(图像域和路径)，http://Sencha.io Src会根据设备分辨率压缩原图创建一个适合的图像提供给访问设备。

http://Sencha.io是国外服务，前端开发者可以尝试在国内是否可用并且效果如何。当然，如果国内有类似服务也可以尝试使用。响应式图像很无聊，但是它使开发者能够设计出当今消费者所需要的沉浸式体验，而不会牺牲图片质量或页面加载速度，现代Web开发需要这些响应式图像。

综述

网站加载时间延迟一秒就可能会导致网站转化率下降7％，创建响应式Web环境是棘手的，它需要微妙的平衡。但是，在不同屏幕尺寸和设备功能的世界中，建立这种图片自适应是必要的。总结下来基本是两种方法：如果不在乎分辨率，开发者可以沿用宽度100%的方法，这种方法是最简便的；如果需要考虑分辨率，就需要查询清楚不同设备的分辨率，然后采用第三方服务或在代码层自主进行设置。