css样式怎么适配手机，css样式怎么应用

用CSS做iOS和Android样式适配

1、css设置数字右上角显示一个圆点适配移动端ios会动。添加样式，div添加背景颜色，添加高度，宽度，设置为行内元素(display：table-cell），关键的样式为添加border-radius，边框弧度。

2、用rem 写可以适配苹果和安卓页面的。不过在一些小屏幕下字体会有点小。

3、PS： 也可以直接使用实际的device-width：如 device-width ： 375px 在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。

4、注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

5、iOS(@1x 下 44px)和 Android(1：1 比率下 48p)都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。

6、然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。

相关问答

Q1: css3怎么实现屏幕自适应

1、手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。

2、选择加载CSS “自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

3、图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：img{ width：100%； max-width：100%；}。

Q2: css手机版页面制作时如何让背景图片适应div的高度和宽度

1、输入位置：固定；top：0；左：0；将整个div固定在屏幕的顶部和左侧。输入宽度：100%；身高：100%；最小宽度：1000像素；这个可以适合div的高度和宽度，而min-width是在屏幕宽度在1000px以内的情况下，保持div的大小不变。

2、通过设置background-size 的属性设置图片大小。

3、对背景图片设置属性：background-size：cover；可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。

4、新建一个html页面，并在页面中写上一个div。并为div添加背景图片，为背景图片添加一些基本的样式。按下键盘上的F12，查看其在浏览器中的效果。利用css中的伪元素：after或者：before。

5、一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。二是将图片设定display：block，设定图片的长宽为rem或者em。

关于css样式怎么适配手机和css样式怎么应用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。