css中media的应用(手机端/PC端的自适应问题)

最新推荐文章于 2023-04-12 14:19:42 发布
最新推荐文章于 2023-04-12 14:19:42 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 前端 HTML CSS 文章标签： media 自适应 手机端 PC端 HTML
@passion_wo
本文链接：https://blog.csdn.net/qq_38198897/article/details/103203803
版权

对于html自适应的解决

  1. 利用纯css解决
  2. 使用media属性去完成
  3. 本人只是简单使用,如若错误望交流

注意: 此文只描述简单的screen, 其他可自行斟酌学习

  • HTML5添加meta
    • 开发者利用meta属性为viewport 去控制适应设备的问题
    • ‘width=device-width’ 根据设备去适应宽度
    • ‘initial-scale=1’ 网页缩放级别(初始加载时候)
    • 如果网页中不存在这个标签, 整个网页的自适应是不会生效的
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no
最低0.47元/天 解锁文章
passion_wo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery自适应PC手机端可编辑表格代码.zip
07-11
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码，jQuery表格添加删除行数据代码，使用起来十分的方便。
@media实现自适应布局
YYece的博客
01-03 2317
准备工作 1、设置@media标签 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> widt...
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6162
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
[HTML_CSS]@media 实现页面自适应布局
stay hungry stay foolish
05-10 4831
目录什么是自适应怎么使用@media语法补充示意图代码本节代码地址 什么是自适应 一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。 总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。 怎么使用@media语法 根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体 大于1000px @media screen and (min-width:100px){} 小于1000px大
【屏幕自适应页面适配问题】CSS的@media，为了适应1440×900的屏幕，使用@media解决问题
DecorateCC的博客
04-12 2150
为了适应1440×900的屏幕，使用@media解决问题
CSS 利用@media screen判断识别手机/PC端浏览器
best_inh的专栏
01-07 1万+
一、写此篇的初衷： 手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。 二、功能实现依据： 首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码： <style type="text
自适应 PC端 手机端 全屏滑动效果
11-24
这种效果可以为用户带来流畅、沉浸式的浏览体验，无论是在PC端还是手机端，都能展现出良好的视觉效果。以下是对全屏滑动效果及其实现方式的详细说明： 1. **响应式设计**： 自适应设计是现代网页开发的关键特性，...
前端学习项目，npmjs主页源码，自适应PC端和手机端
03-15
【前端学习项目，npmjs主页源码，自适应PC端和手机端】 这个项目是一个前端学习资源，旨在帮助开发者理解并构建类似于npmjs官方网站的页面。npmjs是Node.js的包管理器，它提供了大量的开源JavaScript库，方便开发者...
js+css3电脑手机端自适应响应式导航菜单代码
06-05
js+css3实现响应式导航菜单代码是一款类似bootstrap导航菜单，它通过media query制作760像素断点，当视口小于760像素时，菜单会收缩为隐藏的汉堡包菜单，根据浏览窗口大小自适应手机电脑平板端。
自适应PC手机端的jQuery可编辑表格代码.zip
最新发布
09-23
《自适应PC手机端的jQuery可编辑表格代码详解》 在现代网页开发中，交互性和灵活性是提升用户体验的关键因素。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能和简便的API，使得网页动态效果的实现变...
使用@media screen实现网页布局的自适应（手机端，pc，平板自适应）
weixin_42281924的博客
08-18 4807
适用场景 在一些场景下flex布局也不一定全部适用（手机，pc，平板），因而用到了这种方式，针对不同设备进行不同的样式选择，提升用户体验。 创建html文件 使用vs code编辑器，快捷键（!+tab）创建一个html模板 其他编辑器也可把这一段代码复制过去 <!DOCTYPE html> <html lang="en"> <head> <me...
CSS3 @Media 媒体查询
前端产品工程师
09-22 667
/*大型屏幕pc 超大屏*/ @media screen and (min-width:1200px){ #content { color: #f00; background: #000; } } /*1200>=pc>=992 大屏，字体红色，背景黑色*/ @media screen and (min-width:992...
使用CSS的@media属性来写自适应样式，兼容PC端，平板端，手机端；
Mr_Bamboo1994的博客
05-16 1万+
这是我本人在写公司官网用到的@media属性来处理兼容手机端，垫端和PC端的样式; 首先要在HTML的头中写上以下几行代码： 然后在media.css里来为不同的屏幕写不同的样式： 这样就可以实现不同的屏幕适应不同的样式，实现自适应，希望能帮到你们;第一次写，很简单，如果有什么疑问或者错误的地方，大家可以艾特我，希望能和大家一起进步，谢谢！...
电脑手机css自适应,怎么把一个pc页面自适应手机屏幕
weixin_29353431的博客
08-03 4481
无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。首先，在网页代码的头部，加入一行viewport标签meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no /viewport是网页默认的宽度和高度，上面这行代...
css样式自适应手机+平板+PC
qq1016499728博客
07-09 3111
css自适应手机平板pc
CSS的@media语法实现页面端手机端的自适应
热门推荐
xdnloveme的博客
07-11 1万+
在CSS3版本内有这么一个语法： @media mediatype and|not|only (media feature) {     CSS-Code; }  最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性： @media，今天花了1小时左右做了一个自适应的小demo，如下图所示： 电脑端的显示图：
css关于自媒体@media手机端自适应适配
weixin_43565197的博客
08-08 1316
html, body { height: 100%; }@media only screen and (min-width: 320px) and (max-width: 352px) { html { font-size: 45px; } } @media only screen and (min-width: 352px) and (max-width: 640px) { html { font-size: 50px; } } @media only screen and (min-width: 640
使用@media实现网页字体大小自适应
Flying_6的博客
04-22 968
前言 实现网页字体大小的方式有多种，此处只是说明下，如何使用@media实现相应需求。 相关知识点 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。 具体的相关知识点可以参考菜鸟教程：https://www.runoob.com/cssref/css3-pr-mediaquery.html 注意点 1：使用min-width时，小的在前面，大的在后面； 2：使用max-width时，
@media screen实现屏幕自适应内容详解
夜空下的凝视
05-16 1万+
优点： 无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。 准备工作1：设置Meta标签 首先，在使用Media时，需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-width, initial-scale=...
h5如何设置手机端pc端自适应切换
06-12
要实现H5页面的自适应切换，可以使用CSS的媒体查询（Media Queries）来实现。使用媒体查询，可以根据浏览器的视口宽度或设备类型等条件来为不同的设备设置不同的样式。 以下是一些媒体查询的示例代码： 1. 设置在宽度小于等于768px时应用的样式 ``` @media (max-width: 768px) { /* CSS样式 */ } ``` 2. 设置在宽度大于等于768px且小于等于1024px时应用的样式 ``` @media (min-width: 768px) and (max-width: 1024px) { /* CSS样式 */ } ``` 3. 设置在设备为手机时应用的样式 ``` @media only screen and (max-device-width: 480px) { /* CSS样式 */ } ``` 除了使用媒体查询，还可以使用响应式框架（如Bootstrap）来实现H5页面的自适应切换。这些框架提供了一系列响应式的CSS样式和JavaScript插件，可以帮助开发者快速构建适用于不同设备的可响应式布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值