移动端开发第一步
//历史原因,移动端会将html网页文件自动按照980宽,自动缩放来显示页面,如果页面是专门为了移动端写的,就需要在html文档中设置meta标签,控制网页显示的窗口,防止自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
<meta>标签详细使用指导
针对<meta>标签name属性不支持viewport的手持设备和浏览器
移动端开发页面第一种选择(很少用到)
//利用多媒体查询功能,检测用户使用的设备屏幕宽度,针对性地显示不同的css样式
<script>
@meta (max-width:800){
body{
background:red;
}
}...//当检测到是在屏幕小于800的屏幕上,浏览器渲染这套css代码
@meta (max-width:500){
body{
background:green;
}
}...//当检测到屏幕是小于500的屏幕,浏览器渲染这套css代码
//可以利用link标签,单独外部引入对应的屏幕大小的css样式,避免代码混乱
</script>
移动端开发第二种选择(主流)
//利用JavaScript实现,REM与窗口宽度产生关联,让CSS样式自动适应屏幕的宽度(REM就是根元素<html>的font-size值)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
</script>
随之衍生一个新问题
//在写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;
}...
网友评论