您当前的位置:网站首页>CSS>4种移动端适配方法 找CSS教程就上ki4.cc (>^ω^<),css

4种移动端适配方法 找CSS教程就上ki4.cc (>^ω^<),css

2020年06月03日 投稿作者: 围观人数:28

css中&表示什么意思 找CSS教程就上ki4.cc (>^ω^<)

css快速入门:css中&表示上一级的选择器,这是sass的语法。【& > li{margin-bottom:0;}】等同于【上一级选择器 > li {margin-bottom:0;}】。

1.@media screen实现网页布局的自适应

优点 : 无需插件,能够适应各种窗口大小,只需在CSS中添加@media screen属性。

官方文档:@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

语法:@media mediatype and|not|only (media feature) { CSS-Code; }

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色,屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

紧接着我开始接触移动端的适配。

2.rem适配

这个方法是CSDN博主「sxs1995」的原创文章,blog.csdn.net/sxs1995/art…

计算单位是 640px = 6.40rem,

当设计稿的宽度是 750px 时, i = 750; 当设计稿的宽度是 640px 时, i = 640 。

Sass 和 Less 两者之间的区别 找CSS教程就上ki4.cc (>^ω^<)

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。

缺点 : 首次加载页面时,会闪线1-2s,在手机上预览的用户体验不好

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3.用@media实现rem适配

优点:当屏幕宽度更改时,只需修改Html元素中的 font-size 即可适配

/* 不同屏幕宽度,设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4.用vw定制rem自适应布局

在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章,其中一点是:使用vw定制rem自适应布局

优点 : 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

目前,以上的方法我都用过,站在代码量上考虑,我现在主要用的是用vw定制rem自适应布局,大家有其他更好的建议吗?我会认真参考的,谢谢。

推荐教程:《CSS教程》

以上就是4种移动端适配方法的详细内容,更多请关注ki4导航其它相关文章!

使用css样式制作单选框 找CSS教程就上ki4.cc (>^ω^<)

css快速入门:文中为大家分享了使用css样式制作单选框的方法,具有一定的参考价值,希望对大家有所帮助。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.