css之日常琐碎记录

1.@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

http://www.runoob.com/cssref/css3-pr-mediaquery.html

//文档宽度小于300像素则修改背景颜色

　　@media screen and (max-300px){

　　　　body{background:red}

　　}

2.关于项目中多语言时字体显示的处理。最近在项目中遇到日文下文字被解析成中文繁体的问题，经调查发现是整个项目引入的字体导致的。我们在项目整体中引入日语字体，把它放在最前面还是会被覆盖掉，于是只能通过js+css来解决问题。

//在项目中语言切换的方法里获取当前语言，并赋值给html的lang属性
document.getElementsByTagName('html')[0].lang =_.trim(getPreferences().language);

//在css中写该属性对应的样式

html {
  font-family: "Lato Regular", "PingFang SC", Helvetica, 'Helvetica Neue', 'Microsoft YaHei',
  '微软雅黑', sans-serif
}
*[lang|="ja"] {font-family: "Arial","Meiryo","MS Gothic";}

body:lang(ja) {font-family: "Arial","Meiryo","MS Gothic";}