网站界面设计的基本原则是什么,三明鑫龙建设工程网站,有人用wordpress默认主题,泰坦科技网站建设什么是响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念#xff0c;简而言之#xff0c;就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面…什么是响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念简而言之就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验而且随着大屏幕移动设备的普及用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术我们不仅看到很多的创新还看到了一些成形的模式。 -------来自百度百科
媒体查询 media not|only mediatype and (expressions) {} 不过我喜欢用 meadia screen andexpressions{}not :表示 not是用来排除掉某些特定的设备的 例如 media not xxx only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说如果存在only关键字 移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取 Media Type类型的Web浏览器遇到only关键字时会忽略这个样式文件。
值描述all用于所有多媒体类型设备print用于打印机screen用于电脑屏幕平板智能手机等speech用于屏幕阅读器
简单的案例
html!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0,minimal-ui:iosmeta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefstyle.cssscript src/script
/headbodydiv idah1aaaaa/h1/divdiv idbh1bbbbb/h1/divdiv idch1ccccc/h1/divdiv iddh1ddddd/h1/div/body/htmlcssbody{font-family: Arial, Helvetica, sans-serif;background-color: gray;color: white;text-align: center;padding-top:100px;/* transition: display 2s; */}h1{display: none;}/* 媒体查询 */media (max-width: 500px){body{background-color: rebeccapurple;}#d h1{display: block;}}media (min-width: 501px) and (max-width: 756px){body{background-color:red;}#c h1{display: block;}}media (min-width: 757px) and (max-width: 998px){body{background-color:blue;}#b h1{display: block;}}media (min-width: 999px) and (max-width: 1199px){body{background-color:darkgreen;}#a h1{display: block;}}
效果讲讲em和rem
em 和 rem 都是描述字体大小的首先em和rem都是相对长度单位。em是相对于当前对象内文本的字体尺寸。说人话就是em继承父级标签的大小例如0.1em字体大小就是父级标签字体大小的0.1倍而rem是css3新增的相对单位rem相对的是html根标签字体的大小例如chrome默认的html标签字体大小是16px 那对应的1rem就是16px。在响应式布局中rem是比较好用的。
