css进阶5/浅谈移动端开发

移动端开发第一步
//历史原因,移动端会将html网页文件自动按照980宽,自动缩放来显示页面,如果页面是专门为了移动端写的,就需要在html文档中设置meta标签,控制网页显示的窗口,防止自动缩放

//meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
标签详细使用指导
针对标签name属性不支持viewport的手持设备和浏览器

移动端开发页面第一种选择(很少用到)
//利用多媒体查询功能,检测用户使用的设备屏幕宽度,针对性地显示不同的css样式

移动端开发第二种选择(主流)
//利用JavaScript实现,REM与窗口宽度产生关联,让CSS样式自动适应屏幕的宽度(REM就是根元素的font-size值)

随之衍生一个新问题
//在写css样式的时候,元素大小都要计算,换算多了就很出很多问题,所以要利用scss技术来自动转换

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}...