1.互联网公司的产品在PC端和在移动端一般都会有不同的样式,如何实现的?
- 方案1,直接使用现成的bootstrap框架,自动的实现响应式页面,缺点无法满足自己的个性化需求和细节
- 方案2, 为PC端和移动端单独写页面和样式,可以实现个性化需求,但是工作量增多,维护难度大
- 方案3 ,使用模板系统,为PC和移动端单独写一个前端的页面模板,维护难度和代码量多少于方案2
- 方案4,自己使用@midia实现一个轻量级和个性化的CSS框架,优势灵活性强,可复用性高,缺点自己写框架代码量大,费时长,可能与原有项目重复,造成浪费
2.什么是媒体查询?写出语法和基本使用范例?
-
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
-
浏览器支持,>=IE9,>=chrome 21,>=firfox 3.5 , >= safari 4.0,>=Opora9
-
css 语法
@media *mediatype *and|not|only* (media feature)* {* CSS-Code;*} <link rel="stylesheet" media="*mediatype* and|not|only (*media feature*)" href="*mystylesheet.css*">
-
媒体的类型 mediatype
1.all 用于所有设备
2.print 用于打印
3.screen 用于PC,Pad,Phone
4.speech 用于屏幕阅读器等发声装备 -
常用的media features
1.width浏览器宽度
2.height浏览器高度
3.device-width设备屏幕分辨率的宽度值
4.device-height设备屏幕分辨率的高度值
5.orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait(竖向),否则为landscape(横向)
6.aspect-ratio:比例值,浏览器的纵横比
7.device-aspect-ratio:比例值,设备屏幕的纵横比
网友评论