如何通过CSS3 实现响应式Web设计_html/css_WEB-ITnose
程序员文章站
2022-04-15 10:10:28
...
如何通过CSS3 实现响应式Web设计:
分为三个步骤:(1)允许网页宽度自动调整。首先在页面头部中,我们需要加入这样一行: viewport是网页默认的宽度和高度,网页的宽度默认就等于自己屏幕宽度(width=device-width),并且原始缩放比例(initial-scale=1)为1.0,也就是网页初始大小占屏幕面积的100%。(2)流式布局。不使用绝对宽度布局和字体大小,也就是css中代码中,定义宽和高的时候不能使用px(width:px)只能使用百分比(width:%)或者(width:auto)定义高宽。定义字体大小也使用相对单位(em),不使用绝对单位(px)。(3)媒体查询(media query)@media only screen and (max-width:px)max-width就是当屏幕小于等于多少的时候执行而(min-widt)就是当屏幕大于等于多少的时候执行。
推荐阅读
-
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
-
响应式Web设计:HTML5和CSS3实战 第2版 (本·弗莱恩) 中文pdf完整版
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
具有动态效果的响应式设计_html/css_WEB-ITnose
-
响应式WEB设计的9项基本原则_html/css_WEB-ITnose
-
如何制作响应式网站?12个优秀案例参考_html/css_WEB-ITnose
-
bootstrap 响应式设计_html/css_WEB-ITnose
-
学习响应式设计的15个优秀网页作品_html/css_WEB-ITnose
-
闲聊响应式网页设计的一些小点_html/css_WEB-ITnose
-
采用HTML,CSS和jQuery实现响应式网站模板:maglev-theme_html/css_WEB-ITnose