Maison > interface Web > tutoriel HTML > 可以请教关于自适应网页的问题吗?毕业设计急_html/css_WEB-ITnose

可以请教关于自适应网页的问题吗?毕业设计急_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:35:25
original
1135 Les gens l'ont consulté

网页如下:在 @media screen and (max-width: 980px)等的那几个规则里该怎样写 可以做到随着 网页宽度的改变,DIv:content里的DIV:box能够适应网页大小而改变大小??


nbsp;html>











Demo: Responsive Design in 3 Steps















Header










    

        

        

        

    

    

    

        

        

        

    







Footer










回复讨论(解决方案)

宽度换成百分比的方式表示,

自适应无非是把宽度全部换成百分比,既然你用到@media screen and (max-width: 980px)那么你是想做响应式开发吧。这样的话建议你去看看bootstrap这套前端框架,非常好用!

楼主既用H5,,,宽度百分比即可。。。

http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html

自适应的【流式布局】和时下流行的【响应式布局】是不一样的。
流式布局存在于CSS2年代,使用百分比布局,当改变浏览器宽度的时候可以让页面布局基本不变。
但是当时移动设备还不多,所以所谓适应也就是在常见的显示器尺寸。

而【响应式布局】的中心思想是:针对不同分辨率的设备给予合适的布局。也就是大屏幕有大屏幕的样子,小屏幕有小屏幕的样子。也就是说,你至少要做3种布局设计,写在@media 里面。
例如:980以上的分辨率(一般就是电脑屏幕了),就可以用通栏的大图、左中右3栏,等等。
如果是700~979的,就是一般的Pad,可能图片就是要小一些,栏目也是左右两栏。
而更小的手机屏,可能就是单栏的布局,而且响应的导航、登录等等也要有不同的设计。

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal