CSS响应式布局学习笔记五

时间:2020-10-15 作者:WilliamChan

需要注意的细节点

本文开始也说过,响应式布局的关键不仅仅在于布局,更多的是细节需要去考虑。也就是兼容性问题、字体尺寸单位、视口宽高的设置、图片的处理、表单的处理…

1、兼容性问题
IE6、IE7、IE8是不支持媒体查询的。
解决方案:css3-mediaqueries.js。引入此文件可以解决IE6-8无法实现响应式媒体查询的尴尬。

2、字体尺寸单位
css3引入了新的单位叫做rem,rem是相对于根元素的,不要忘记重置根元素字体大小

html{font-size:100%;}

完成后,就可以定义响应式字体:

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3、视口宽高的设置
不同设备,不同宽度。宽度不固定,可以使用百分比。

做移动端项目之前的准备

常用的META标签(移动端)
忽略数字自动识别为电话号码:

<meta name="format-detection" content="telephone=no"/>

把页面增加到桌面主屏幕:
在苹果手机的Safari浏览器中访问一个页面,用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上(就像安装一个APP,在主屏幕上就会有一个操作的图标),这样下一次可以直接点击图标打开页面。(只对IOS有效)

WebApp全屏模式:

<meta name="apple-mobile-web-app-capable" content="yes"/>

设置状态栏颜色:
只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的,即白色,网页从状态栏以下开始显示) | black(状态栏将为黑色,网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明,网页将充满整个屏幕,状态栏会盖在网页之上)。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

添加到主屏后的图标:

<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>

IOS系统中对ICON有一套规范,就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”,是IOS设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式。rel=”apple-touch-icon-precomposed”是设定按照设计稿原图的图标显示,rel=”apple-touch-icon”是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114×114。

添加到主屏后的标题:

<meta name="apple-mobile-web-app-title" content="标题"/>

添加智能App广告条 Smart App Banner(不常用):

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

QQ浏览器(X5内核)独有的META:

<meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏

UC浏览器独有的META:

<meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式

强制图片显示:UC浏览器为了节省流量,为用户提供了无图模式,但是如果页面的图片是必不可少的,如验证码的,需要强制浏览器显示图片,可以设置imagemode。通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置,那么可以使用这个

<img src="" show="force"/>
<meta name="imagemode" content="force"/>

使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

<meta name="browsermode" content="application"/>

以上就是知道不介绍的《CSS响应式布局学习笔记五》,希望对你有所帮助。
上一篇《CSS响应式布局学习笔记四》

声明:若您对本文内容有任何意见,欢迎发送邮件至:admin@zhidaobu.com,本站会尽快回应并做出相应处理。