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

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

WBOY
Freigeben: 2016-06-24 11:35:25
Original
1142 Leute haben es durchsucht

网页如下:在 @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,可能图片就是要小一些,栏目也是左右两栏。
而更小的手机屏,可能就是单栏的布局,而且响应的导航、登录等等也要有不同的设计。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage