Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ต้องใส่ code อย่างไร เพื่อให้หน้าจอแสดงผลตามขนาดอุปกรณ์อัตโนมัติ (แบบ Responsive)



 

ต้องใส่ code อย่างไร เพื่อให้หน้าจอแสดงผลตามขนาดอุปกรณ์อัตโนมัติ (แบบ Responsive)

 



Topic : 137167



โพสกระทู้ ( 144 )
บทความ ( 0 )



สถานะออฟไลน์




อันนี้จาก Indwx.html ครับ
เป็น code ใน google sheet app script ครับ
Code (PHP)
<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.1.slim.js"
    integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
</head>


อันนี้ css.html ครับ
Code (PHP)
<style>
  @import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
    *{
      font-family: 'Itim', sans-serif;
    }
    .nav-link {
      cursor:pointer;
    }
    #loading{
      position: fixed;
        top:0 ;
        left:0;
        z-index:10000;
      width:100vw;
      height:100vh;
      background-color: rgba(255,255,255,0.9);
    }
    label {
        display: block;
        /* font: 1rem 'Fira Sans', sans-serif; */
    }
    input,
    label {
        margin: .4rem 0;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
        position: relative;
        box-sizing: border-box;
        margin-top: 2px;
        width: 100%;
        text-align: center;
        display: none;
    }

    .tabulator-col-content{
      background-color:#dfff;
      color:#999f;
    }

 

</style>




Tag : PHP, HTML








ประวัติการแก้ไข
2024-03-17 16:43:53
2024-03-17 16:45:03
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2024-03-17 16:42:22 By : ajsudkedt View : 304 Reply : 6
 

 

No. 1



โพสกระทู้ ( 9,587 )
บทความ ( 2 )



สถานะออฟไลน์


size panel
width: 100.00vw (กว้าง 100% ของ หน้าต่าง)
height: 100.00vh (สูง 100% ของ หน้าต่าง)

size font
font-size: 3.50vw; (ขนาดอักษรกว้าง 3.5% ของหน้าต่าง


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-18 20:44:11 By : Chaidhanan
 


 

No. 2



โพสกระทู้ ( 144 )
บทความ ( 0 )



สถานะออฟไลน์


. ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2024-03-18 20:44:11
รายละเอียดของการตอบ ::
... ใส่บรรทัดไหน ไฟล์ไหน ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-20 05:09:08 By : ajsudkedt
 

 

No. 3



โพสกระทู้ ( 9,587 )
บทความ ( 2 )



สถานะออฟไลน์


เป็นชุดคำสั่งใน style ของ html object

<div style="xxxx: yyyy" >abcdefg</div>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-20 06:38:02 By : Chaidhanan
 


 

No. 4



โพสกระทู้ ( 144 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
<!-- CUSTOM CSS  -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
    *{
      font-family: 'Itim', sans-serif;
    }
    .nav-link {
      cursor:pointer;
    }
    #loading{
      position: fixed;
        top:0 ;
        left:0;
        z-index:10000;
      width: 100.00vw;
      height: 100.00vh;
      font-size: 3.50vw;
      background-color: rgba(255,255,255,0.9);
    }
    label {
        display: block;
        /* font: 1rem 'Fira Sans', sans-serif; */
    }
    input,
    label {
        margin: .4rem 0;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
        position: relative;
        box-sizing: border-box;
        margin-top: 2px;
        width: 100%;
        text-align: center;
        display: none;
    }

    .tabulator-col-content{
      background-color:#dfff;
      color:#999f;
    }

</style>
ใส่ตามนี้ ถูกต้องไหมครับ
แต่ลองแล้วไม่มีผลใด ๆ เลยครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-21 20:01:20 By : ajsudkedt
 


 

No. 5



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


CTRL+F5
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-22 00:48:21 By : mr.v
 


 

No. 6



โพสกระทู้ ( 9,587 )
บทความ ( 2 )



สถานะออฟไลน์


https://portals-game.com/rsp.html

เข้าไปลองดูแล้วกัน

Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="stats-in-th" content="60ee" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Test: Responsive</title>
	<link rel="icon" href="/Img/Logo/001.png" type="image/png" sizes="16x16">
<!-- CUSTOM CSS  -->
<style>
    #loading{
      position: fixed;
        top:0 ;
        left:0;
        z-index:10000;
      width: 100.00vw;
      height: 100.00vh;
      font-size: 3.50vw;
      background-color: rgba(255,255,255,0.9);
    }
		.bbb{ font-size: 7vw; font-weight: bold; }
</style>

</head>
<body>
<div id="loading" >
<b>ใส่ตามนี้ ถูกต้องไหมครับ</b><br>
<span class="bbb" > แต่ลองแล้วไม่มีผลใด ๆ เลยครับ</span>
</div>
</body>
</html>


ปล. ทดลองในคอมฯ แล้วขยับหน้าต่าง browser ดู


ประวัติการแก้ไข
2024-03-22 11:58:20
2024-03-22 12:01:55
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2024-03-22 11:55:14 By : Chaidhanan
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ต้องใส่ code อย่างไร เพื่อให้หน้าจอแสดงผลตามขนาดอุปกรณ์อัตโนมัติ (แบบ Responsive)
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่