创新互联百度小程序教程：CSS

  • CSS
    • 尺寸单位
    • 样式导入
    • 适配样式
    • 内联样式
    • 选择器权重
    • 常见问题
      • Q：如何避免横屏播放时，icon 变大的问题？
      • Q：百度小程序里面可以和微信小程序一样使用 rpx 吗？
      • Q：请问如何设置首页背景图刚好铺满屏幕？
      • Q：小程序在 iPhonex 上，页面最后的样式加上 margin-bottom 值不显示该如何处理？

    CSS

    CSS 是描述 SWAN 的样式语言。支持 CSS 的属性。
    在此基础上，做了一些编译支持：

    为射洪等地区用户提供了全套网页设计制作服务，及射洪网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、射洪网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

    • 尺寸单位
    • 样式导入

    尺寸单位

    • 对于自适应的单位，推荐使用 CSS3 vw 为单位，vw 代表视窗( Viewport )的宽度为 1%；
    • 同时也支持 rpx，规定屏幕宽为 750rpx。在 iPhone X 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
    设备rpx 换算 px（屏幕宽度 / 750）px 换算 rpx（750 / 屏幕宽度）
    iPhone51rpx = 0.42px1px = 2.34rpx
    iPhone61rpx = 0.5px1px = 2rpx
    iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

    样式导入

    为了工程化和代码复用，我们支持 @import 语句，导入 CSS 文件。

    代码示例

    • CSS
     
 
 
        
  
  
    1. /* header.css */
      2.   
  
  
    2. .header {
      3.   
  
  
    3.  padding: 8px;
      4.   
  
  
    4. }
      5.   
  
  
      6.   
  
  
    6. /* index.css */
      7.   
  
  
    7. @import "header.css";
      8.   
  
  
    8. .body {
      9.   
  
  
    9.  padding: 12px;
      10.   
  
  
    10. }
      11.

    适配样式

    为了兼容 iPhoneX 底部安全区，我们提供了一组兼容样式：

    • CSS
     
 
 
        
  
  
    1. .swan-security-padding-bottom {
      2.   
  
  
    2.  padding-bottom: 34px;
      3.   
  
  
    3. }
      4.   
  
  
    4. .swan-security-margin-bottom {
      5.   
  
  
    5.  margin-bottom: 34px;
      6.   
  
  
    6. }
      7.   
  
  
    7. .swan-security-fixed-bottom {
      8.   
  
  
    8.  bottom: 34px;
      9.   
  
  
    9. }
      10.

    注意：该组样式会自动在需要适配安全区的场景动态注入，开发者不需要自行添加，只要在.swan文件中使用这组类名即可。

    代码示例

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2. test
      3.   
  
  
      4.

    基础库 3.140.17 开始我们将同时支持 safe-area-inset-* 的写法，建议使用以下 css 进行兼容

    • CSS
     
 
 
        
  
  
    1. padding-bottom: constant(safe-area-inset-bottom);
      2.   
  
  
    2. padding-bottom: env(safe-area-inset-bottom);
      3.

    内联样式

    内联样式与 Web 开发一致,且支持动态更新

    代码示例

    • SWAN
    • JS
     
 
 
        
  
  
    1.  swan 
      2.  
 

     
 
 
        
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  eleColor: 'red',
      4.   
  
  
    4.  eleFontsize: '48rpx'
      5.   
  
  
    5.  }
      6.   
  
  
    6. });
      7.

    选择器权重

    权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • CSS
     
 
 
        
  
  
    1. view {
      2.   
  
  
    2.  // 权重为 1
      3.   
  
  
    3.  color: blue;
      4.   
  
  
    4. }
      5.   
  
  
      6.   
  
  
    6. .ele {
      7.   
  
  
    7.  // 权重为 10
      8.   
  
  
    8.  color: red;
      9.   
  
  
    9. }
      10.   
  
  
      11.   
  
  
    11. #ele {
      12.   
  
  
    12.  // 权重为 100
      13.   
  
  
    13.  color: pink;
      14.   
  
  
    14. }
      15.   
  
  
      16.   
  
  
    16. view#ele {
      17.   
  
  
    17.  // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
      18.   
  
  
    18.  color: orange;
      19.   
  
  
    19. }
      20.   
  
  
      21.   
  
  
    21. view.ele {
      22.   
  
  
    22.  // 权重为 1 + 10 = 11
      23.   
  
  
    23.  color: green;
      24.   
  
  
    24. }
      25.

    说明：

    • 使用时请注意 box-sizing 属性为非默认值的场景；
    • 百度 App 11.0 版本开始支持 iPhoneX，11.0.5 开始支持 iPhoneXS iPhoneXSMax iPhoneXR。

    常见问题

    Q：如何避免横屏播放时，icon 变大的问题？

    A：请使用 px 单位来书写 css ，不建议使用 rpx 等其他单位。

    Q：百度小程序里面可以和微信小程序一样使用 rpx 吗？

    A：支持的。

    Q：请问如何设置首页背景图刚好铺满屏幕？

    A：可以按照以下设置方式进行尝试，给 body 标签指定背景图，这样背景图就可以填充整个浏览器 viewport 了。

    代码示例

     
 
 
        
  
  
    1. body {
      2.   
  
  
    2.  margin: 0;
      3.   
  
  
    3.  background: url("xxx图片地址") no-repeat;
      4.   
  
  
    4.  background-size: cover;
      5.   
  
  
    5.  background-position: center center;
      6.   
  
  
    6.  background-attachment:fixed;
      7.   
  
  
    7. }
      8.

    注意：
    1.为了使背景图片的宽高不小于容器的宽高，需设置background-size: cover;进行填充，如果背景图小于 body 标签的尺寸，浏览器会拉伸图片。当把一个图片拉伸时，图片会变模糊，所以在选择背景图片时，宽高要大一些。
    2.为了让背景图始终相对于 viewport 居中，需设置background-position: center center;。
    3.当内容的高度大于 viewport 的高度时，会出现滚动条。希望背景图始终相对于 viewport 固定，即使用户滚动时也是一样，解决方案：background-attachment: fixed;。

    Q：小程序在 iPhonex 上，页面最后的样式加上 margin-bottom 值不显示该如何处理？

    A：兼容 iphoneX 方案。

    网站标题：创新互联百度小程序教程：CSS
    转载来于：http://www.shufengxianlan.com/qtweb/news34/93984.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    静态网站知识

    同城分类信息

    四川和正源　　 　云服务器　　 　成都定制网站开发　　 　四川电信机房托管　　 　腾讯云香港空间　　 　成都网站建设　　 　普格博源建站　　 　成都定制网站建设　　 　西云服务器托管　　 　卖链接　　 　成都广告制作　　 　腾讯香港免备案空间　　 　成都网站建设　　 　发光字制作　　 　app软件定制开发　　 　申请域名　　 　手机软件开发　　 　犀浦防纹窗　　 　成都小程序制作　　 　抖音代运营