初学者浅谈移动端页面开发

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a901a315188254e7617c1c6

文章标签：

#javascript #ViewUI

移动端开发第一步

//历史原因,移动端会将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），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

标签详细使用指导

针对标签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就是根元素的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技术来自动转换当然使用scss还有很多好处

scss,sass异同/文档

@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;
}...
复制代码

转载于:https://juejin.im/post/5a901a315188254e7617c1c6